javascript - Angularjs - 如何使复选框像选择一样工作？

Question

我不知道如何解释，但如果我没记错 angularJS 会自动绑定所有值（选项），所以当用户从列表中选择某些内容时，它会通过模型填充，对吗？

我怎样才能用复选框实现类似的效果？我希望选择超过 1 个值，然后选择一个复选框，如果只有一个但在代码中没有改变太多。

所以我的选择现在看起来像这样：

<div ng-repeat="event in allElements"
  <select ng-model="event.selectedElement" ng-change="updateSelectedElements(event);"
     <option value>Select date</option>
     <option value>{[{ getDate(event.elements) }]}</option>
  </select>
</div>

updateSelectedElements 只是一个对列表做一些事情的函数。

我如何使用相同的逻辑但使用复选框？因此，如果复选框是 optin，它会像 select 一样“绑定”选择的元素？我有点迷路的原因是复选框值只是真/假，但选择实际上有列表元素作为选项，对吧？

尝试过类似的东西：

<input type="checkbox" ng-model="event.selected" ng-change="updateSelectedElements(event)" />

但不幸的是，我为 event.selectedElement 获得了 null 而对于 select 它有效。我需要通过某些功能手动设置那个 event.selectedElement 吗？我不确定它是如何工作的。

标签： javascriptangularjs

Answer 1

你可以尝试这样的事情：

<input type='checkbox' ng-repeat="fruit in fruits"
  ng-checked="checkedFruits.indexOf(fruit) != -1" ng-click="toggleCheck(fruit)">


  function SomeCtrl ($scope) {
    $scope.fruits = ["apple, orange, pear, naartjie"];
    $scope.checkedFruits = [];
    $scope.toggleCheck = function (fruit) {
        if ($scope.checkedFruits.indexOf(fruit) === -1) {
            $scope.checkedFruits.push(fruit);
        } else {
            $scope.checkedFruits.splice($scope.checkedFruits.indexOf(fruit), 1);
        }
    };
}

参考： 链接 1 链接 2