在前端开发中，我们经常需要处理复选框列表的值。使用 AngularJS，我们可以轻松地将这些值绑定到模型中，并根据需要进行操作。本文将介绍如何使用 AngularJS 来实现这一点。
准备工作
首先，我们需要在 HTML 中定义一个包含所有复选框的列表。每个复选框都应该有一个唯一的值：
<div ng-app="myApp" ng-controller="myCtrl">
<label ng-repeat="item in items">
<input type="checkbox" ng-model="selected[item.value]">{{ item.label }}
</label>
</div>在这个例子中，我们使用了 ng-repeat 指令来遍历 items 列表，并为每个项生成一个复选框。每个复选框都有一个 ng-model 指令，它将与 selected 对象的属性绑定，该对象将包含已选中的复选框的值。
现在，让我们看看如何在控制器中初始化 items 和 selected 对象。
-- -------------------- ---- -------
--- --- - ----------------------- ----
------------------------ ---------------- -
------------ - -
- ------ ------ ------ - --
- ------ ------ ------ - --
- ------ ------ ------ - -
--
--------------- - ---
---在这个例子中，我们使用 $scope 对象来在控制器和视图之间传递数据。我们将 items 数组设置为包含三个对象的数组，每个对象都具有标签和值属性。我们还定义了一个名为 selected 的空对象，它将在选择复选框时用于存储选定的值。
处理复选框选择
现在，当用户选择或取消选择复选框时，我们需要更新 selected 对象。为此，我们可以添加一个 ng-change 指令并使用以下代码：
<div ng-app="myApp" ng-controller="myCtrl">
<label ng-repeat="item in items">
<input type="checkbox" ng-model="selected[item.value]" ng-change="updateSelection()">{{ item.label }}
</label>
</div>在这个例子中，我们添加了一个 ng-change 指令，当用户选择或取消选择复选框时会触发 updateSelection() 函数。现在，让我们看看如何实现这个函数。
-- -------------------- ---- -------
--- --- - ----------------------- ----
------------------------ ---------------- -
------------ - -
- ------ ------ ------ - --
- ------ ------ ------ - --
- ------ ------ ------ - -
--
--------------- - ---
---------------------- - ---------- -
--- ------------- - ---
--- ---- - -- ---------------- -
-- -------------------- -
--------------------------------
-
-
---------------------------
--
---在这个例子中，我们定义了一个名为 updateSelection() 的函数，它将遍历 selected 对象并将选定的复选框的值添加到 selectedItems 数组中。最后，我们在控制台中输出 selectedItems。
结论
恭喜！现在您已经学会了如何使用 AngularJS 来绑定复选框列表的值。这样，在处理大型表单数据时，您可以轻松地获取和操作用户选择的值。如果您想深入研究此主题，请查看 AngularJS 的文档或尝试创建自己的示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24987