AngularJS Select(选择框！)

来源：互联网发布：中船重工知乎编辑：程序博客网时间：2024/06/05 04:23

今天开始去学习一下AngularJS的选择框。我认为哈就是，去创建一个下拉框。。。。。。。

创建选择框呢，必须得有命令这个页面去创建选择框吧，然后，在AngularJS里面，拥有两个特殊的指令去创建下拉框，分别是：ng-repeat，ng-options。

诶，好巧，ng-repeat不是循环的么，为什么也可以去创建下拉框。。当去得到一个容器里面的数据的时候，不得一个一个的得到么，那么就应该循环去一个一个的去得到数据了吧。

好了，步入正文：

在创建一个下拉框的时候，列表项需要通过对象和数组“循环”输出！

现在有一个例子可以去看：

<body><script src="angular.js-1.6.4/angular.min.js"></script><div ng-app="myApp" ng-controller="myCtrl"><select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names"></select><!-- 设置默认选中值，是个数组，下标是从0开始的 --></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {    $scope.names = ["Google", "Runoob", "Taobao"];});</script></body>

在这个代码里面，用到了ng-options。

现在去看一下用到ng-repeat的代码：

<script src="angular.js-1.6.4/angular.min.js"></script><div ng-app="myApp" ng-controller="myCtrl"><select><option ng-repeat="x in names">{{x}}</option></select></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {    $scope.names = ["Google", "Runoob", "Taobao"];});</script></body>

这两段代码，在网页上所显示的内容是一致的，但是ng-repeat和ng-options这两个指令就一样么？不不不，

对于这个两个指令，ng-repeat它有局限性，他选择的值是一个字符串，而ng-options他选择的值确实一个对象：现在有一个代码去看一下差别：

<script src="angular.js-1.6.4/angular.min.js"></script><div ng-app="Myapp" ng-controller="Myctrl"><p>选择网站：</p><select ng-model="selectedSite" ng-options="x.site for x in sites"></select><h1>你选择的是: {{selectedSite.site}}</h1><p>网址为: {{selectedSite.url}}</p></div><script>angular.module('Myapp',[]).controller('Myctrl',function($scope){ $scope.sites = [             {site : "Google", url : "http://www.google.com"},             {site : "Runoob", url : "http://www.runoob.com"},             {site : "Taobao", url : "http://www.taobao.com"}         ];});</script>

现在看到的是用ng-options指令所写的，你可以去看一下ng-options它后面所包括的句子，他直接用到的x的site用到了这个sites这个对象里面具体的site。

这是它在网页上所显示出来的。

现在对于ng-repeat这个指令来写一个差不的/。

<script src="angular.js-1.6.4/angular.min.js"></script><div ng-app="myApp" ng-controller="MyCtrl"><p>你选择的是：</p><select ng-model="selectedSite"><option ng-repeat=" x in sites" value="{{x.url}}">{{x.site}}</option></select><h1>选择的是：{{selectedSite}}</h1></div><script>angular.module('myApp',[]).controller('MyCtrl',function($scope){$scope.sites=[              {site : "Google", url : "http://www.google.com"},              {site : "Runoob", url : "http://www.runoob.com"},              {site : "Taobao", url : "http://www.taobao.com"}              ]});</script>

它这段代码在网页上所显示出来的页面是：

针对ng-repeat和ng-options这两个指令所写出来的东西，虽然在下拉框内的内容是一样的，但是对于ng-options这个指令来说是可以去更改下拉框中的内容的，因为它引用的毕竟是一个对象，不是一个字符串。你可以去尝试一下把ng-options="x.site for x in sites"

中x.site去更改为x.url再去查看一下下拉框中会出现什么。会有惊喜哦。

所以建议在创建下拉框的过程中如果需要去选择下拉框中的内容的时候，去使用ng-options;

以上代码，均来自http://www.runoob.com/angularjs/angularjs-select.html，这里会有更详细的说法。

若上方有不对之处，请一一指点！

阅读全文

0 0