参考手册
AngularJS 表格
AngularJS SQL

AngularJS Select

AngularJS 允许您基于数组或对象中的项创建下拉列表。

使用 ng-options 创建选择框

如果要基于 AngularJS 中的对象或数组创建下拉列表，应该使用 ng-options 指令:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="myApp" ng-controller="myCtrl">
  8. <select ng-model="selectedName" ng-options="x for x in names">
  9. </select>
  11. </div>
  13. <script>
  14. var app = angular.module('myApp', []);
  15. app.controller('myCtrl', function($scope) {
  16.     $scope.names = ["Emil", "Tobias", "Linus"];
  17. });
  18. </script>
  20. <p>本例显示了如何使用 ng-options 指令填写下拉列表。</p>
  22. </body>
  23. </html>
运行一下

ng-options vs ng-repeat

你也可以使用 ng-repeat 指令创建相同的下拉列表:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="myApp" ng-controller="myCtrl">
  8. <select>
  9. <option ng-repeat="x in names">{{x}}
  10. </select>
  12. </div>
  14. <script>
  15. var app = angular.module('myApp', []);
  16. app.controller('myCtrl', function($scope) {
  17.     $scope.names = ["Emil", "Tobias", "Linus"];
  18. });
  19. </script>
  21. <p>本例显示了如何使用 ng-repeat 指令填充下拉列表。</p>
  23. </body>
  24. </html>
运行一下

由于 ng-repeat 指令为数组中的每个项目重复一块 HTML 代码，因此它可以用于在下拉列表中创建选项，但 ng-options 指令是专门为用选项填充下拉列表而设计的。

应该用什么?

您可以同时使用 ng-repeat 指令和 ng-options 指令：

假设您有一个对象数组:

  1. $scope.cars = [
  2.  {model : "Ford Mustang", color : "red"},
  3.  {model : "Fiat 500", color : "white"},
  4.  {model : "Volvo XC90", color : "black"}
  5. ];
实例

使用 ng-repeat:

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="myApp" ng-controller="myCtrl">
  8. <p>选择一辆车:</p>
  10. <select ng-model="selectedCar">
  11. <option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}
  12. </select>
  14. <h2>你选择了: {{selectedCar}}</h2>
  16. </div>
  18. <script>
  19. var app = angular.module('myApp', []);
  20. app.controller('myCtrl', function($scope) {
  21.     $scope.cars = [
  22.         {model : "Ford Mustang", color : "red"},
  23.         {model : "Fiat 500", color : "white"},
  24.         {model : "Volvo XC90", color : "black"}
  25.     ];
  26. });
  27. </script>
  29. <p>使用 ng-repeat 指令创建下拉列表时，所选值必须是字符串。</p>
  30. <p>在本例中，您必须在颜色或模型之间进行选择，以作为所选值。</p>
  32. </body>
  33. </html>
运行一下

将该值用作对象时，请使用 ng-value 代替 value:

实例

作为一个对象使用 ng-repeat :

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="myApp" ng-controller="myCtrl">
  8. <p>选择一辆车:</p>
  10. <select ng-model="selectedCar">
  11. <option ng-repeat="x in cars" ng-value="{{x}}">{{x.model}}
  12. </select>
  14. <h2>你选择了一辆 {{selectedCar.color}} {{selectedCar.model}}</h2>
  16. </div>
  18. <script>
  19. var app = angular.module('myApp', []);
  20. app.controller('myCtrl', function($scope) {
  21.     $scope.cars = [
  22.         {model : "Ford Mustang", color : "red"},
  23.         {model : "Fiat 500", color : "white"},
  24.         {model : "Volvo XC90", color : "black"}
  25.     ];
  26. });
  27. </script>
  29. <p>使用 ng-repeat 指令创建下拉列表时，所选值必须是字符串。</p>
  30. <p>在本例中，您必须在颜色或模型之间进行选择，以作为所选值。</p>
  32. </body>
  33. </html>
运行一下
实例

使用 ng-options:

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="myApp" ng-controller="myCtrl">
  8. <p>选择一辆车:</p>
  10. <select ng-model="selectedCar" ng-options="x.model for x in cars">
  11. </select>
  13. <h2>你选择了: {{selectedCar.model}}</h2>
  14. <p>它的颜色是: {{selectedCar.color}}</p>
  16. </div>
  18. <script>
  19. var app = angular.module('myApp', []);
  20. app.controller('myCtrl', function($scope) {
  21.     $scope.cars = [
  22.         {model : "Ford Mustang", color : "red"},
  23.         {model : "Fiat 500", color : "white"},
  24.         {model : "Volvo XC90", color : "black"}
  25.     ];
  26. });
  27. </script>
  29. <p>使用 ng-options 指令创建下拉列表时，选定的值可以是一个对象。</p>
  30. <p>在本例中，可以显示选定元素的模型和颜色。</p>
  32. </body>
  33. </html>
运行一下

当选定的值是一个对象时，它可以保存更多信息，并且应用程序可以更灵活。

在本教程中，我们将使用 ng-options 指令。

数据源作为一个对象

在前面的示例中，数据源是一个数组，但我们也可以使用对象。

假设您有一个具有键值对的对象:

  1. $scope.cars = {
  2.  car01 : "Ford",
  3.  car02 : "Fiat",
  4.  car03 : "Volvo"
  5. };

对于对象，ng-options 属性中的表达式有点不同:

实例

使用对象作为数据源，x 代表键，y 代表值:

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="myApp" ng-controller="myCtrl">
  8. <p>选择一辆车:</p>
  10. <select ng-model="selectedCar" ng-options="x for (x, y) in cars">
  11. </select>
  13. <h2>你选择了: {{selectedCar}}</h2>
  15. </div>
  17. <p>本例演示了在创建下拉列表时使用对象作为数据源。</p>
  19. <script>
  20. var app = angular.module('myApp', []);
  21. app.controller('myCtrl', function($scope) {
  22.     $scope.cars = {
  23.         car01 : "Ford",
  24.         car02 : "Fiat",
  25.         car03 : "Volvo"
  26.     }
  27. });
  28. </script>
  30. </body>
  31. </html>
运行一下

选定的值将始终是键 值 对中的 值。键 值 对中的 值 也可以是对象:

实例

选定的值仍然是键值对中的值，只是这次它是一个对象:

  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="myApp" ng-controller="myCtrl">
  8. <p>选择一辆车:</p>
  10. <select ng-model="selectedCar" ng-options="x for (x, y) in cars">
  11. </select>
  13. <h2>你选择: {{selectedCar.brand}}</h2>
  14. <h2>型号: {{selectedCar.model}}</h2>
  15. <h3>颜色: {{selectedCar.color}}</h3>
  17. <p>请注意，选定的值代表一个对象。</p>
  18. </div>
  20. <script>
  21. var app = angular.module('myApp', []);
  22. app.controller('myCtrl', function($scope) {
  23.     $scope.cars = {
  24.         car01 : {brand : "Ford", model : "Mustang", color : "red"},
  25.         car02 : {brand : "Fiat", model : "500", color : "white"},
  26.         car03 : {brand : "Volvo", model : "XC90", color : "black"}
  27.     }
  28. });
  29. </script>
  31. </body>
  32. </html>
运行一下

下拉列表中的选项不必是键值对中的键，也可以是值或值对象的属性:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  4. <body>
  6. <div ng-app="myApp" ng-controller="myCtrl">
  8. <p>选择一辆车:</p>
  10. <select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
  11. </select>
  13. <h2>你选择: {{selectedCar.brand}}</h2>
  14. <h2>型号: {{selectedCar.model}}</h2>
  15. <h3>颜色: {{selectedCar.color}}</h3>
  17. <p>下拉列表中的可见文本也可以是 value 对象的属性。</p>
  19. </div>
  21. <script>
  22. var app = angular.module('myApp', []);
  23. app.controller('myCtrl', function($scope) {
  24.     $scope.cars = {
  25.         car01 : {brand : "Ford", model : "Mustang", color : "red"},
  26.         car02 : {brand : "Fiat", model : "500", color : "white"},
  27.         car03 : {brand : "Volvo", model : "XC90", color : "black"}
  28.     }
  29. });
  30. </script>
  32. </body>
  33. </html>
运行一下
AngularJS 表格
AngularJS SQL

分类导航