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

Question

我的 ng-repeat 复选框有问题。在模态加载时，它们的状态是从 $http.get 他们加载正常。但是如果它们在单击 ng-change 时加载时设置为 true dosent 似乎注册了它但是当再次单击时它看到更改为 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')

Angular

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>

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

Angular checkbox loading as ng-checked='true' on ng-change not seeing the change to false

angularjs

checkbox

angularjs-scope

pug

哈巴狗