AngularJS：勾选框值与列表数据绑定指南

javascript

2024-03-04 15:08:11

勾选框值与 AngularJS 列表数据绑定

在 AngularJS 中，勾选框值与列表数据绑定是一个常见的任务。这个过程涉及到使用 ng-model 和 ng-repeat 指令，以便在勾选或取消勾选勾选框时更新列表。

为什么使用勾选框？

勾选框提供了用户选择或取消选择一个或多个选项的简单方法。它们通常用于调查、表单和任何需要用户输入多项选择的情况。

如何绑定勾选框值到 AngularJS 列表

要将勾选框值绑定到 AngularJS 列表，需要遵循以下步骤：

在控制器中定义一个数组来存储所选项目：

$scope.selectedItems = [];

在 HTML 中，使用 ng-repeat 指令遍历列表中的项目：

<ul>
  <li ng-repeat="item in items">
    <input type="checkbox" ng-model="selectedItems" value="{{item}}">
  </li>
</ul>

使用 ng-model 指令将勾选框绑定到 selectedItems 数组：

ng-model="selectedItems"

当勾选或取消勾选勾选框时，ng-model 会更新 selectedItems 数组，反映用户的选择。

示例

以下是使用 AngularJS 绑定勾选框值到列表的一个示例：

HTML 代码：

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
  <script>
    var app = angular.module('myApp', []);
    app.controller('MyController', function($scope) {
      $scope.items = ['Apple', 'Orange', 'Pear', 'Banana'];
      $scope.selectedItems = [];
    });
  </script>
</head>
<body ng-app="myApp" ng-controller="MyController">
  <ul>
    <li ng-repeat="item in items">
      <input type="checkbox" ng-model="selectedItems" value="{{item}}"> {{item}}
    </li>
  </ul>
</body>
</html>