Angularjs UI Bootstrap modal -- Checkboxes checked state not being update

Question

I am using the AngularJs ui bootstrap modal. I have a page with checkboxes. When the user checks on the checkboxes and click on a button, it passes the checked checkboxes to the modal:

var modalInstance = $modal.open({
   templateUrl: 'myModalContent.html',
   controller: ModalInstanceCtrl,
   resolve: {
     checkedSearches: function () {
         var checkedSearches = [];
         angular.forEach($scope.searches, function(search)
             {
                 if(search.checked) {
                     checkedSearches.push(search);
                 }
             });

            return checkedSearches;
      }
   }
 });

In my modal, we redisplay the data as checkboxes again. The user can select/unselect the checkboxes and click save, and it will save all the selected checkboxes.

var ModalInstanceCtrl = function ($scope, $modalInstance, checkedSearches) {
    $scope.checkedSearches = checkedSearches;

     var saveSearches = [];
     angular.forEach($scope.checkSearches, function(search)
              {
                  if(search.checked) {
                      saveSearches.push(search);
                  }
              });

}

Issue, is that, it is saving ALL the checkboxes. Seems as though the checked property stays with the checkboxes, even though the user unchecks it in the modal. I haven't include the code to save the searches. I basically pushed on to the searchSearches array, and it seems to be pushing all the checkboxes, including unchecked ones.

Here is my view/modal for the checkboxes:

<tr ng-repeat="search in checkedSearches">
    <td><input type="checkbox" ng-checked="search.checked" name="search" ng-model="search.checked" /></td><td>{{search.id}}</td><td>{{search.name}}</td>
</tr>

score 0 · Accepted Answer · answered Mar 03 '14 at 04:49

Ok, looks like issue is that for some reason, the checked property for the checkbox, was not being binded the model. So I added an ng-click directive to handle this:

<tr ng-repeat="search in checkedSearches">
    <td>
        <input type="checkbox" name="search" ng-checked="search.checked" ng-click="setCheckbox(search)" />
     </td>
</tr>

I added this in my modal's controller:

 $scope.setCheckbox = function(search) {
     if(search.checked == true) {
         search.checked = false;
     }
     else {
        search.checked = true;
     }
 };

Now if anyone out there, can tell me why the checkbox is not binded to my model.

Using ng-model (and ng-change if you need to handle the event) instead might solve the problem: http://stackoverflow.com/a/16601110 — user2173353, Aug 22 '14 at 14:01

Angularjs UI Bootstrap modal -- Checkboxes checked state not being update

1 Answers1