Angular ui-select：如何仅将选定的值绑定到 ng-model

AngularJS

使用Angular ui-select时，我们经常需要将选定的值绑定到ng-model中。ng-model是AngularJS的一个指令，用于在应用程序的作用域中创建一个变量，将选定的值赋给它。在ui-select中，我们可以使用ng-model来绑定选定的值。

在使用Angular ui-select时，我们首先需要在HTML页面中引入相关的依赖文件。例如：

html
<script src="https://Ajax.Googleapis.com/Ajax/libs/AngularJS/1.7.9/angular.min.JS"></script>
<script src="https://cdnJS.cloudflare.com/Ajax/libs/angular-ui-select/0.20.0/select.min.JS"></script>
<link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=https://cdnJS.cloudflare.com/Ajax/libs/angular-ui-select/0.20.0/select.min.CSS">

接下来，我们可以在HTML页面中使用ui-select指令来创建一个下拉列表。例如：

html
<ui-select ng-model="selectedItem">
  <ui-select-match>{{$select.selected.name}}</ui-select-match>
  <ui-select-choices repeat="item in items">
    <div ng-bind-html="item.name | highlight: $select.search"></div>
  </ui-select-choices>
</ui-select>

在上面的代码中，ng-model绑定了一个名为selectedItem的变量，用于保存选定的值。ui-select-match指令用于显示选中的值，ui-select-choices指令用于显示下拉列表中的选项。

在Angular控制器中，我们需要定义items和selectedItem两个变量，并给它们赋初始值。例如：

Javascript
$scope.items = [
  {id: 1, name: '选项1'},
  {id: 2, name: '选项2'},
  {id: 3, name: '选项3'}
];
$scope.selectedItem = null;

现在，当我们在下拉列表中选择一个选项时，选中的值将会自动绑定到selectedItem变量中。我们可以在控制器中使用selectedItem变量来获取选中的值，并进行后续的操作。

案例代码：

html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <Meta charset="UTF-8">
  <title>Angular ui-select</title>
  <script src="https://Ajax.Googleapis.com/Ajax/libs/AngularJS/1.7.9/angular.min.JS"></script>
  <script src="https://cdnJS.cloudflare.com/Ajax/libs/angular-ui-select/0.20.0/select.min.JS"></script>
  <link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=https://cdnJS.cloudflare.com/Ajax/libs/angular-ui-select/0.20.0/select.min.CSS">
</head>
<body ng-controller="myCtrl">
  <h1>Angular ui-select</h1>
  
  <ui-select ng-model="selectedItem">
    <ui-select-match>{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="item in items">
      <div ng-bind-html="item.name | highlight: $select.search"></div>
    </ui-select-choices>
  </ui-select>
  
  <h2>选中的值：</h2>
  
{{selectedItem}}
  
  <script>
    angular.module('myApp', ['ui.select'])
      .controller('myCtrl', function($scope) {
        $scope.items = [
          {id: 1, name: '选项1'},
          {id: 2, name: '选项2'},
          {id: 3, name: '选项3'}
        ];
        $scope.selectedItem = null;
      });
  </script>
</body>
</html>

绑定选定值到ng-model

在使用Angular ui-select时，我们通常需要将选定的值绑定到ng-model中。这可以通过在ui-select标签中使用ng-model指令来实现。ng-model指令用于在作用域中创建一个变量，并将选定的值赋给它。

在上面的案例代码中，我们将一个名为selectedItem的变量绑定到ui-select指令的ng-model属性上。当我们在下拉列表中选择一个选项时，选中的值将会自动绑定到selectedItem变量中。

获取选中的值

一旦我们将选定的值绑定到ng-model中，我们就可以在控制器中使用该变量来获取选中的值，并进行后续的操作。在上面的案例代码中，我们在控制器中通过{{selectedItem}}的方式来显示选中的值。

使用Angular ui-select，我们可以将选定的值绑定到ng-model中。通过在ui-select标签中使用ng-model指令，我们可以在作用域中创建一个变量，并将选定的值赋给它。然后，我们可以在控制器中使用该变量来获取选中的值，并进行后续的操作。