使用复选框选择项目Angular JS

Question

我希望能够有一个项目列表，并使用复选框选择一个：

<div data-ng-repeat="device in devices">
    <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
            <label>
                <input type="checkbox"> {{ device.name }}
            </label>
        </div>
    </div>
</div>

如果这可以使用自定义指令来完成，那也很酷！

因此，当选中checkbox时，设备将进入ng-model，所有其他复选框都将被禁用。

我有一种感觉，需要创建一个自定义模型，比如：

devices = [{
     name: "LED",
     checked: false,
     id: "98"
  },{
     name: "LED 2",
     checked: false,
     id: "8"
  },{
     name: "LED 3",
     checked: false,
     id: "78"
  }]

只需要在每次选中一个复选框时激发一些功能。

我希望可以通过复选框上的ng-click来完成？以及canBeChecked 模型上的双向数据绑定

devices = [{
         name: "LED",
         checked: false,
         id: "98",
         canBeChecked: true
      },{
         name: "LED 2",
         checked: false,
         id: "8",
         canBeChecked: true
      },{
         name: "LED 3",
         checked: false,
         id: "78",
         canBeChecked: true
      }]

Answer 1

遍历您的集合，并为每个集合显示一个复选框：

<div ng-repeat="device in devices">
    <label>
        {{ device.name }}
        <input type="checkbox" ng-model="device.checked" ng-click="change(device)">
    </label>
</div>

请注意，该复选框还有ng-click指令。这是您希望在每次单击复选框时触发的。触发函数清除所有复选框，只选中单击的复选框。复选框现在的行为应该类似于单选按钮。

你的控制器可能看起来像这样：

app.controller("MyCtrl", ["$scope", function($scope) {
    $scope.devices = [{
        name: "LED",
        checked: false
    }, {
        name: "LED 2",
        checked: false
    }, {
        name: "LED 3",
        checked: false
    }];
    $scope.change = function(device) {
        angular.forEach($scope.devices, function(item) {
            item.checked = false;
        });
        device.checked = true;
    };
}]);

没有必要创建您提到的canBeChecked属性。

以下是完整的工作示例：http://jsfiddle.net/zxdr8/

Answer 2

如果必须使用复选框，下面是您的操作方法。

标记：

<div data-ng-repeat="device in devices">
    <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
            <label>
                <input type="checkbox" ng-model="device.checked" ng-change="checkDevice(device)"> {{ device.name }}
            </label>
        </div>
    </div>
</div>

控制器：

$scope.devices = [{
     name: "LED",
     checked: false,
     id: "98"
  },{
     name: "LED 2",
     checked: false,
     id: "8"
  },{
     name: "LED 3",
     checked: false,
     id: "78"
  }];
$scope.checkDevice = function (device) {
    for (var i = 0, len = $scope.devices.length; i < len; ++i) {
        if ($scope.devices[i] !== device)
             $scope.devices[i].checked = false;
    }
});

Answer 3

您的checked和canBeChecked属性似乎只是一个UI。在我看来，您不应该仅仅为了创建自定义数据模型和复制不必要的属性。相信我，当我开始使用Angular时，我也做过类似的事情，但还有更好的方法。

考虑将所选数据存储在其他位置（型号、服务、控制器等）。如果你可以只存储一个ID（基本属性），你可以这样做你的"复选框类无线电元素"：

<div ng-repeat="device in devices">
  <label>
    <input type="checkbox" ng-true-value="{{device.id}}" ng-false-value="" ng-model="some.storage">
    {{device.name}}
  </label>
</div>

这就是你所需要的，不需要背景代码。当Angular团队实现对ngTrueValue和ngFalseValue指令的插值支持时，您将能够存储整个对象并将模型重置为例如null。