Angular 复选框在 ng-change 上加载为 ng-checked='true' 没有看到更改为 false

Question

我的 ng-repeat 复选框有问题。 在模态加载时，它们的状态是从$http.get 设置的 他们加载很好。但是，如果它们在加载时设置为true，则在单击ng-change 时似乎会注册它，但是当再次单击时，它会看到更改为true。这显示在我的pre 和console.log()

我会放什么代码

哈巴狗

form.form-horizontal(name='sysInfo' ng-controller='sysInfo' ng-repeat='sysName in sysNames')
    label{{sysName.friendyName}}
        input(type='checkbox' ng-change='submit(sysName.selected, options.sysBackend, sysName.id)'  ng-model='sysName.selected' ng-checked='select.indexOf(sysName.id) != -1')

角度

app.controller('sysInfo', sysInfo);
    function sysInfo($scope, $rootScope, $http){
    $scope.options = function(foo) {
        var config = {params :{fooName: foo}}
        $('#myModal').modal();
        $http.get('/api/boo', config)
        .then(function(resp) { 
            var selectArray = [];
            $rootScope.select = [];
            $rootScope.options = res.data.data[0];
            $rootScopesysNames = resp.data.sysInfo;
            $rootScope.sysLinks = resp.data.sysNamedLinks;
            angular.forEach(resp.data.sysNamedLinks, function(value1, key1){
                angular.forEach(resp.data.sysInfo, function(value0, key0){
                    if(value1.sysLinkId === value0.id){
                        selectArray.push(value0.id)
                        $rootScope.select = selectArray
                    }
                })
             })
        })
}

res.data.data[0] = {id:1, sysBackend:'fumanchu'} resp.data.sysInfo = [{id: 1, friendlyName:foo},{id: 2, friendlyName:fo},{id: 3, friendlyName:boo},] resp.data.sysNamedLinks = [{sysLinkId:1},{sysLinkId:2},{sysLinkId:3}]

Answer 1

这是因为ng-model 和ng-checked 之间存在一些冲突。

参考下面的例子，复选框被ng-checked表达式初始化为checked，但ng-model的值是false。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app ng-init="test=false;checked=true;">
  <input type="checkbox" ng-model="test" ng-checked="checked === true">
  {{test}}
</div>

在第二个示例中，没有冲突并且运行良好。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app ng-init="test=true;checked=true;">
  <input type="checkbox" ng-model="test" ng-checked="checked === true">
  {{test}}
</div>

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app ng-init="test=false;checked=true;">
  <input type="checkbox" ng-model="test" ng-checked="checked === true">
  {{test}}
</div>