角度复选框在选择时消失答案

【问题标题】：Angular checkboxes disapear on select角度复选框在选择时消失
【发布时间】：2015-08-18 17:12:07
【问题描述】：

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

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

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

这是加载时的样子：

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

我是 Angular 的新手，所以我怀疑我在做一些明显错误的事情。有人可以指出我正确的方向吗？

【问题讨论】：

标签： javascript angularjs checkbox

【解决方案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" 
        />

【讨论】：

【解决方案2】：

您需要将ng-model 直接绑定到您的enabled 布尔属性上：

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

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}
        ]
    };
});

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

【讨论】：