All geek questions in one place

AngularJS Bootstrap UI btn-checkbox in ng-repeat

I am having problems using the angular bootstrap-ui btn-checkbox directive and its interaction with the ng-repeat directive. The way to configure the directive is that you have to manually specify each individual model for a multi-line flag script, which is either not possible in ng repeat, or I did not find how to do this.

I found an answer somewhat similar to this question:

Setting up and getting a bootstrap switch inside an angular repeat loop

and branched out the plunker to better explain what I see as a problem. The plunker can be viewed:

http://plnkr.co/edit/ddiH78pzqE3fsSoq8gAr?p=preview

+4
source share
1 answer

The answer you link is the same solution for this problem. Each repeat button needs its unique model property. If they are all set to the same model as in the $scope.checkboxModel = {id: 0} panel, when one button is checked, they will all be checked.

So, to give the uniqueness of each button, you can set another property on the objects in ng-repeat . This property will contain a boolean that changes during validation. Thus, your model will look like this:

 $scope.companies = [{"id":2,"name":"A", truthy:false}] // and so on

You do not need to explicitly specify this in the controller - just declare a new property of the right in the button element model:

 <companies ng-repeat="company in companies"> <button type="button" class="btn" ng-model="company.truthy" btn-checkbox>{{company.name}}</button> </companies>

Here plunk

+8
source

Source: https://habr.com/ru/post/1490578/

More articles:


All Articles