javascript - Angular 复选框在选择时消失

Question

我的应用程序中有一个复选框列表:

<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>

作为 segment.items 存在于 $scope 中的数据看起来像这样:

[
    {"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}
]

这在加载时呈现良好，并且选中了正确的复选框。但是，如果我选中一个复选框，标签就会消失并且绑定(bind)似乎会丢失。如果我取消选中一个复选框，它似乎工作正常，但如果我再次选中它，它也会消失。控制台中未显示任何错误。

这是加载时的样子:

只要我点击“英语”，我就会得到这个

我是 Angular 的新手，所以我怀疑我做错了什么。有人可以指出我正确的方向吗？

Answer 1

将您的 ng-model 指向 ng-model="item" 会将您的 item 转换为 bool 值。
此外，您不应将 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" 
        />