Vivien Pipo Vivien Pipo - 4 months ago 60
AngularJS Question

angular ng-disable checkbox not update with dynamic source

I have several checkboxes dynamicaly generated from array source:

/*js*/
$scope.arrondissements = JSON.parse('
[{"name":"4e","checked":false,"disable":true},
{"name":"5e","checked":false,"disable":false},
{"name":"11e","checked":false,"disable":false},
{"name":"12e","checked":false,"disable":false},
{"name":"13e","checked":false,"disable":false},
{"name":"14e","checked":false,"disable":false},
{"name":"15e","checked":false,"disable":false},
{"name":"16e","checked":false,"disable":false},
{"name":"17e","checked":false,"disable":false},
{"name":"18e","checked":false,"disable":false},
{"name":"19e","checked":false,"disable":false},
{"name":"20e","checked":false,"disable":false}]');


<!-- HTML -->
<div ng-repeat="item in arrondissements" class="checkbox-inline ">
<label>
<input type="checkbox" ng-disabled="{{item.disable == true}}"
value="{{item.checked}}" ng-model="item.checked" >
<span>{{item.name}}</span>
</label>
</div>


Checkboxes are generated correctly but When source gets updated , checkbox doesn't update

/*js*/
$scope.disableCb = function () {
$scope.arrondissements[5].disable = true;
$scope.arrondissements[6].disable = true;
$scope.arrondissements[7].disable = true;
}

<!-- HTML -->
<button ng-click="disableCb()">disable</button>


Could you tell me why and how to fix it?

I made a Plunker : http://plnkr.co/edit/jD1l3NgJuduTOoskpeVM

Answer

You should define your $scope.disableCb function inside your controller function.

function controller( $scope) {
    var vm = $scope;

     $scope.title = 'controller';

$scope.arrondissements =   JSON.parse('[{"name":"4e","checked":true,"disable":true},{"name":"5e","checked":false,"disable":false},{"name":"11e","checked":false,"disable":false},{"name":"12e","checked":false,"disable":false},{"name":"13e","checked":false,"disable":false},{"name":"14e","checked":false,"disable":false},{"name":"15e","checked":false,"disable":false},{"name":"16e","checked":false,"disable":false},{"name":"17e","checked":false,"disable":false},{"name":"18e","checked":false,"disable":false},{"name":"19e","checked":false,"disable":false},{"name":"20e","checked":false,"disable":false}]');

$scope.disableCb = function () {

         $scope.arrondissements[5].disable = true;
         $scope.arrondissements[6].disable = true;
         $scope.arrondissements[7].disable = true;
      }

    }

I've also fixed how you used your directives. I've removed the value attribute on the checkboxes since they're redundant with ng-model. I've fixed your usage of ng-disabled as well

 <div ng-repeat="item  in arrondissements" class="checkbox-inline ">
                    <label>
                        <input type="checkbox" ng-disabled="item.disable"
                                ng-model="item.checked" >
                        <span>{{item.name}}</span>
                    </label>
                </div>

              <button ng-click="disableCb()">disable</button>  

see my fork on your plunker: http://plnkr.co/edit/v1fwlf7QH0189WAhv6qM?p=preview

Comments