Question

我的应用中有一个复选框列表：

~/Packages

$ scope作为segment.items存在的数据如下所示：

<div class="col-md-6" ng-repeat="item in segment.items">
    <div class="checkbox">
        <label>
            <input 
              type="checkbox" 
              ng-model="item" 
              ng-checked="item.enabled" 
              value="{{item.id}}" 
              class="segment-visibility-checkbox" 
            />
               {{item.name}} <code>/ {{item.slug}}</code>
        </label>
    </div>
</div>

这样可以在加载时呈现良好状态，并检查正确的checbox。但是，如果我选中一个复选框，标签将消失，绑定似乎丢失。如果我取消选中一个复选框，它似乎工作正常，但如果我再次选择它，它也会消失。控制台中没有错误显示。

这是加载时的样子：

一旦我点击＆＃34;英语＆＃34;我明白了

我是Angular的新手所以我怀疑我做了一些明显的错误。任何人都可以指出我正确的方向吗？

Answer 1

将您的ng-model指向ng-model="item"会将您的item转换为布尔值。
此外，您不应将ng-model与ng-checked一起使用：https://docs.angularjs.org/api/ng/directive/ngChecked

您应该做的是以下内容：

        <input 
          type="checkbox" 
          ng-model="item.enabled" 
          value="{{item.id}}" 
          class="segment-visibility-checkbox" 
        />

Answer 2

您需要直接在ng-model布尔属性

上绑定enabled

<input 
    type="checkbox" 
    ng-model="item.enabled"
    value="{{item.id}}" 
    class="segment-visibility-checkbox" 
/>

＆＃13;

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope) {
    $scope.segment = {
    	items: [
            {"id":1,"slug":"nl","name":"Dutch","enabled":true},
            {"id":4,"slug":"en","name":"English","enabled":false},   
            {"id":2,"slug":"fr","name":"French","enabled":true},    
            {"id":3,"slug":"de","name":"German","enabled":false}
        ]
    };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl">
  
  {{segment.items}}
  
  <div class="col-md-6" ng-repeat="item in segment.items">
    <div class="checkbox">
      <label>
        <input
          type="checkbox" 
          ng-model="item.enabled"
          value="{{item.id}}" 
          class="segment-visibility-checkbox" 
      />
      {{item.name}} <code>/ {{item.slug}}</code>
      </label>
    </div>
  </div>
</div>

＆＃13;

Angular复选框在select上消失

2 个答案: