How do I toggle field required attribute after ng-click?

Question

I have a dropdown list in a repeater that should toggle my custom "required" attribute. I tried ng-show but the display="none" attribute is all that was added. My options are:-

1- Add/remove the input field and set bird.Stuff, not just hide it because it is still required.

2- Add/remove 'required' attribute on the input field.

js

$scope.validateParticipants = function (type) {
    if (type == "Single") {
        this.donation.Participants = "1";
    }
    else
        this.donation.Participants = "";
}

html

 <div ng-repeat="bird in animalTest.birds">
    @(Html.DropDownList("Type", (IEnumerable<SelectListItem>)ViewBag.BirdList, new { ng_model = "bird.Type", ng_change = "validateRequired(bird.Type)", required = "Type is required" }))
    ...
    <input data-ng-show="bird.Type == 'Endangered'" id="stuff" type="number" data-ng-model="bird.Stuff" required = "Number of Volunteers required"/>  
</div>

Thanks for the help in advance!

Answer 1

Use ng-required. This takes an angular expression and adds the required attribute if the expression is true.

<input type="number" data-ng-model="bird.Stuff" ng-required="donation.Participants > 0"/>