angularjs ng-options设置多个默认选项
2023-03-15 23:16:56 时间
ng-options可以接收一个数组或者对象,并对它们进行循环,将内部的内容提供给select标签内部的选项。而select中需要设置默认值,是如何设置呢?其实可以使用ng-model绑定数据myColor,也可以在对应的controller中定义ng-model全局数据$scope.myColor,并为其赋值。或者双向绑定指定ng-model,设置选中的值。
ng-options的表达式格式:
<所选属性> as <标签> for <变量> in <数组>
方法一:使用ng-model绑定数据myColor。
angular.module('myApp', []) .controller('MyController', ['$scope'], function($scope) { $scope.colors = ['black', 'white', 'red', 'blue', 'yellow']; $scope.myColor = $scope.colors[2]; })
方法二:在对应的controller中定义ng-model全局数据$scope.myColor,并为其赋值。
<div ng-controller="MyController"> <select ng-model="myColor" ng-options="color for color in colors"></select> </div>
注意:赋值为select的默认值。
方法三:双向绑定指定ng-model,设置选中的值。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ng-app="app"> <head> <title>select</title> <script src="JS/angular.min.js"></script> <script> var app = angular.module('app', []); app.controller('selectController', function ($scope) { $scope.mycity = '北京'; $scope.Cities = [{ id: 1, name: '北京', group: '中国' }, { id: 2, name: '上海', group: '中国' }, { id: 3, name: '广州', group: '中国' }]; }); </script> </head> <body> <div ng-controller="selectController"> <select ng-model="mycity" ng-options="city.name as city.name group by city.group for city in Cities"></select> <h1>欢迎来到{{mycity}}</h1> </div> </body> </html>
以上就是小编总结的的三种angularjs ng-options设置默认值额方法,希望能对你有所帮助哦~
相关文章
- 《Spring Data 官方文档》7. 映射
- HBase 系统架构
- Kafka Producer接口
- 一个小型数据库的核心组件
- Kafka可靠性的思考
- kafka监控系统
- 苹果悄悄补上了可被未授权收集传感器数据的iPhone漏洞
- 《云数据管理:挑战与机遇》2.3 数据库系统
- 《云数据管理:挑战与机遇》2.3.1 预备知识
- 大数据探索:在树莓派上通过 Apache Spark on YARN 搭建 Hadoop 集群
- 《云数据管理:挑战与机遇》2.3.1 预备知识
- 聊聊Zookeeper-快速开始
- 《云数据管理:挑战与机遇》2.3.3 恢复和提交
- 如何不使用DBCA在Oracle 11中删除数据库
- Kafka 0.8 配置参数解析
- 当MySQL数据库遭到攻击篡改后,使用备份和binlog进行数据恢复
- 《Mybatis官方文档》 – 动态 SQL
- 如何保障流式处理的数据一致性
- Apche Kafka 的生与死 – failover 机制详解
- 漫谈流式计算的一致性