0

In angular, I have a list of checkboxes that are all binded to a value of boolean value that I get from a json:

<div ng-repeat="err in rec.errorList"><input type="checkbox" ng-model="err.ignore" name="{{err.errorCode}}" ng-value="err.errorCode"  check-all="{{err.errorCode}}" /></div>

But mean while, I am trying to check all those checkboxes with the same name, when checking one of the checkboxes!

what is the best way of doing that in angular way? I mean is there a way of binding all these checkboxes with the same Name attribute for example, together? I tried to write a directive, something like this but don't know how should I continue on that:

.directive("checkAll", function(){
    return {
        link: function(scope, element, attr){
            element.bind('change', function(){
                var errorCode = attr["checkAll"];
                var elms = scope.errorCode;             
            })
        }
    }
})

Here is a plunker of what I actually want to do http://plnkr.co/edit/sLXGlXRh9vu7FETDmJd1?p=preview I can have many lists, and what I want to is whenever I click on one of these checkboxes, update all the checkboxes with the same errorCode maybe without looping on all those errorLists again.

Shilan
  • 813
  • 1
  • 11
  • 17
  • Have you looked at the $index function? And dynamic form names? Such as http://stackoverflow.com/questions/27513192/angularjs-dynamic-name-for-a-form-inside-ng-repeat – brianlmerritt Sep 28 '15 at 08:30

1 Answers1

1

You could do this simply using the same ng-model for each name.

This will look like this :

Controller

$scope.errorList = [{errorCode:1},{errorCode:2},
{errorCode:1},{errorCode:3},{errorCode:1},{errorCode:1},
{errorCode:2},{errorCode:1},{errorCode:3},{errorCode:3}];
$scope.checkboxByName = {};

View

  <div ng-repeat="err in errorList">
    <input type="checkbox" ng-model="checkboxByName[err.errorCode]">
  </div>

If you really need the error.ignore var on each error, you could add this function :

 $scope.updateIgnore = function(){
  angular.forEach($scope.errorList, function(error){
   error.ignore = $scope.checkboxByName[error.errorCode];
  })
 }

And a ng-change on all your inputs :

ng-change="updateIgnore()"

Here is a plunker showing the full implementation

Hope it helped.

Okazari
  • 4,597
  • 1
  • 15
  • 27
  • Thanks for your reply. I am not sure I'm following you, I mean how actually I can bind checkboxes to both err.errorCode and err.ignore? and what is error.signal for? – Shilan Sep 28 '15 at 07:29
  • @Shilan Right, signal standed for ignore, i just missnamed it. Actually you are doing only one bind (to checkboxByName[error.errorCode] ) and do an update of all the errors.ignore when you change one of this values. (Thank to updateIgnore() function). You should check the plunker for a live example. If you have anymore question feel free to ask. – Okazari Sep 28 '15 at 07:37
  • maybe I haven't explained my problem correctly, here is a plunker of what my problem is: http://plnkr.co/edit/sLXGlXRh9vu7FETDmJd1?p=preview I can have many errorlists, and I need to update the other checkboxes with the same error code, when I click on one of them. thanks again for your time – Shilan Sep 28 '15 at 08:21
  • unfortunately that's the way I get them from my ajax service. I was thinking if it is possible to bind them to something like ng-model = "err.ignore[err.errorCode]", however didn't work till now :( – Shilan Sep 28 '15 at 08:35
  • @Shilan I can make it working like this : http://plnkr.co/edit/TpMiYlPhxJhzoqTyLZqC?p=preview but it will not update err.ignore and i'm not sure that's what you need – Okazari Sep 28 '15 at 08:40
  • Excellent! :) Yes that's exactly what I want! I just added this to the checkbox ng-checked = "err.ignore == true" so that it will be initialized at the very begining. Thanks again – Shilan Sep 28 '15 at 08:55