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（原始属性），你可以这样做“checkbox-radio-like-element”：

<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指令实现插值支持时，您将能够存储整个对象并将模型重置为例如空。

使用复选框选择项目Angular JS

3 个答案: