Angular ui-选择多个干净的ng-model值

Ajax

使用Angular UI的选择多个干净的ng-model值

在使用Angular UI时，我们经常会遇到需要选择多个值的情况。而Angular UI提供了一个非常方便的解决方案，即使用ng-model来实现多选功能。本文将介绍如何使用Angular UI的选择多个干净的ng-model值，并通过案例代码来演示。

案例代码：

html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <title>Angular UI Multiple Selection</title>
  <script src="https://Ajax.Googleapis.com/Ajax/libs/AngularJS/1.6.9/angular.min.JS"></script>
  <script src="https://cdnJS.cloudflare.com/Ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.JS"></script>
</head>
<body>
  <div ng-controller="myController">
    <h3>选择多个干净的ng-model值</h3>
    <hr>
    <h4>选择你喜欢的水果：</h4>
    <div class="checkbox" ng-repeat="fruit in fruits">
      <label>
        <input type="checkbox" ng-model="selectedFruits[fruit]" ng-change="updateSelectedFruits()">{{fruit}}
      </label>
    </div>
    <hr>
    <h4>你选择了以下水果：</h4>
    <ul>
      <li ng-repeat="(fruit, selected) in selectedFruits" ng-if="selected">{{fruit}}</li>
    </ul>
  </div>
  <script>
    angular.module('myApp', ['ui.bootstrap'])
    .controller('myController', function($scope) {
      $scope.fruits = ['苹果', '香蕉', '橙子', '葡萄', '西瓜'];
      $scope.selectedFruits = {};
      $scope.updateSelectedFruits = function() {
        $scope.selectedFruits = {};
        angular.forEach($scope.fruits, function(fruit) {
          if ($scope.selectedFruits[fruit]) {
            $scope.selectedFruits[fruit] = true;
          }
        });
      };
    });
  </script>
</body>
</html>

在上面的案例代码中，我们创建了一个Angular应用，并定义了一个控制器myController。控制器中定义了一个数组fruits，存储了可选的水果列表。同时，我们还定义了一个空对象selectedFruits，用于存储用户选择的水果。

接下来，我们使用ng-repeat指令在页面上循环展示水果列表，并为每个水果创建一个复选框。每个复选框都使用ng-model指令绑定到selectedFruits对象中对应的属性上。这样，当用户勾选或取消勾选复选框时，selectedFruits对象中对应的属性值会自动更新。

在页面的底部，我们使用ng-repeat指令展示用户选择的水果列表。我们通过遍历selectedFruits对象，将选中的水果以列表项的形式展示出来。

实现多选功能

为了实现多选功能，我们在每个复选框上添加了ng-change指令，并调用了updateSelectedFruits函数。这个函数会在用户勾选或取消勾选复选框时被调用，用于更新selectedFruits对象。

在updateSelectedFruits函数中，我们首先将selectedFruits对象重置为空对象。然后，使用angular.forEach函数遍历fruits数组，将选中的水果添加到selectedFruits对象中。这样，最终selectedFruits对象中只包含用户选择的水果。

通过使用Angular UI的选择多个干净的ng-model值，我们可以轻松实现多选功能，并且能够方便地获取用户选择的值。在本文中，我们通过一个案例代码演示了如何使用Angular UI来实现这一功能。希望本文能对你理解和应用Angular UI有所帮助。