AngularJS 指令ng-select

最新推荐文章于 2024-11-22 12:05:34 发布

转载最新推荐文章于 2024-11-22 12:05:34 发布 · 126 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ByronWu12345/p/4853306.html

文章标签：

#javascript #ViewUI

本文介绍如何使用AngularJS中的ng-select与ng-options指令来创建动态表单。通过实例展示了如何利用ng-options从数组中循环生成下拉列表选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ng-select用来将数据同HTML的<select>元素进行绑定。这个指令可以和ng-model以及ng-options指令一同使用，构建精细且表现优良的动态表单。

ng-options的值可以是一个内涵表达式（comprehension expression），其实这只是一种有趣的说法，简单来说就是它可以接受一个数组或对象，并对它们进行循环，将内部的内容提供给select标签内部的选项。它可以是下面两种形式。

<!doctype html>
<html ng-app="myApp">
<head>
  <link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
</head>
<body>

<div ng-controller="CityController">
  <select ng-model="city" ng-options="city.name for city in cities">
    <option value="">Choose City</option>
  </select>
  Best City: {{ city.name }}
</div>
  
</body>
</html>

angular.module('myApp', [])
.controller('CityController', function($scope) {
    $scope.cities = [
      {name: 'Seattle'},
      {name: 'San Francisco'},
      {name: 'Chicago'},
      {name: 'New York'},
      {name: 'Boston'}
    ];
});

转载于:https://www.cnblogs.com/ByronWu12345/p/4853306.html