Угловая модель js не обновляется

Question

Является новым для угловых js. У меня есть следующий код

<div ng-controller="myCtl">  

       <input type='checkbox' ng-model='selectAll'/>Select All 
       <div ng-repeat="c in language.availableOptions"> 
        <input type='checkbox' ng-model='language.opted[$index]' 
        ng-checked="selectAll" ng-true-value='{{c}}' 
        ng-false-value=""/> 
        {{c}}   
       </div>   
        {{selectAll}} 
        selected languages : {{language.opted}}  
      </div>  

    <script type="text/javascript"> 
    /** 
    * Module 
    * 
    * Description 
    */ 
    var myApp = angular.module('myApp', []); 

    myApp.controller('myCtl', ['$scope', function($scope) { 

     $scope.language ={}; 
     $scope.language.availableOptions = ["java","c","cpp","asp"]; 
     $scope.language.opted=[]; 
     $scope.selectAll=false; 

    }]) 


    </script> 

Идея заключается в том, что если пользователь выбирает выбрать все, то все языки будут выбраны и обновление соответствующих модели [language.opted].

Теперь, если я выбрал флажок «Выбрать все», все чекбоксы выбраны, но модель пуста. Зачем?

Answer 1

Проверьте документацию для ng-checked

Обратите внимание, что эта директива не должна использоваться вместе с ngModel, так как это может привести к непредсказуемому поведению.

Итак, попробуйте сделать это по-другому.

---

Я рекомендую использовать ng-change на входе с функцией в контроллере, который будет устанавливать каждую модель к текущему значению:

ng-change="changeSelectedValue(language.opted[$index])" 

И в контроллере:

$scope.changeSelectedValue = function(value){ 
    // Sets the value of every $scope.language.opted to "value" 
}