angularjs的select使用2
https://cnodejs.org/topic/549007b44823a0234c9e1716
myAppModule.controller('FrmController', ['$scope',function($scope){
$scope.colors = [{name:'black', shade:'dark'},{name:'white', shade:'light'},{name:'red', shade:'dark'},{name:'blue', shade:'dark'},{name:'yellow', shade:'light'}];
$scope.myColor = 'red';}]);
<select ng-model="m.myColor" ng-options="color.name as color.name for color in colors">
</select>
</form>
<select ng-model="m" ng-options="***color ***as color.name for color in colors">
这样居然可以一次获取到 color 对象的全部属性值;
<!doctype html><html><head><meta charset="UTF-8"><title>test</title><script type="text/javascript" src="angular.min.js"></script><script>var myApp = angular.module("myApp", []);myApp.controller("testCtrl", function($scope){ $scope.data = [{id:1,value:'hello'},{id:2,value:'bye'},{id:3,value:'hmmmm'}]; //$scope.selectValue = $scope.data[0].id;});</script></head><body ng-app="myApp"><form ng-controller="testCtrl"> <select ng-model="selectValue" ng-options="item.id as item.value for item in data"></select><br /><br /> <div ng-switch="selectValue"> <div ng-switch-when="1">hello</div> <div ng-switch-when="2">bye</div> <div ng-switch-when="3">hmmmm</div> <div ng-switch-default>ah?</div> </div></form></body></html> |
angularjs的select使用2的更多相关文章
- AngularJS下拉列表select在option动态变化之后多出了一个错误项的问题
场景: Select初始化之后,选中select的某个选项 通过AngularJS更新select的选项 错误写法: HTML(使用ng-repeat) <div ng-app="Te ...
- AngularJS的select设置默认值
AngularJS的select设置默认值 在使用Angular时候使用select标签时会遇到绑定数据指定默认显示值可这样实现 <!DOCTYPE html> <html ng-a ...
- 关于angularjs的select下拉列表存在空白的解决办法
angularjs 的select的option是通过循环造成的,循环的方式可能有ng-option或者</option ng-repeat></option>option中 ...
- AngularJS初始化Select选择框
一.引入 之前一个离职的同事负责的项目大量的引入了AngularJS的JS框架,后来我接手相关他项目里的功能.由于对AngularJS不是太熟,在他的功能上进行二次开发就比较费劲了,印象比较深的一个就 ...
- Angularjs实现select的下拉列表
练习使用angularjs实现一个select下拉列表: <div ng-app="selectApp" ng-controller="selectControll ...
- AngularJS:Select
ylbtech-AngularJS:Select 1.返回顶部 1. AngularJS Select(选择框) AngularJS 可以使用数组或对象创建一个下拉列表选项. 使用 ng-option ...
- angularjs 下select中ng-options使用
当我有一堆object数据要用下拉框进行显示选择时,可以使用到angularjs中的select中的ng-options的属性.官网网址:https://docs.angularjs.org/api/ ...
- AngularJs的Select演示
昨天需要在项目使用Angular.js的select,测试了好久才研究出怎么进行赋值,操作. HTML代码 <!DOCTYPE html> <html> <head> ...
- angularJs绑定select的正确姿势
最近在项目中使用ionic,需要在页面上绑定一个年份下拉框,默认选中当前年,并且在下拉框的change事件中增加一些业务逻辑. 不管是使用ng-repeat还是ng-options,都是各种坑:默认选 ...
- angularJS中select元素的应用浅析
select array 数据: select ng-model 用法: 1.可以是一个对象形式,ng-model="test" $scope.test = {name: &quo ...
随机推荐
- Ant Design(ui框架)
官方文档:https://ant.design/docs/react/introduce-cn 说明:Ant Design 是一个 ui框架,和 bootstrap 一样是ui框架.里面的组件很完善, ...
- vue绑定属性、绑定class及绑定style
1.绑定属性 v-bind 或者 : 例如:<img :src="pic_src" /> <template> <div id="app& ...
- arcpy 常用操作
目录: 通用操作 条件函数 前提: import arcpy from arcpy.sa import * 1.通用操作 设置工作路径:arcpy.env.workspace("path_o ...
- xshell链接linux出现SSH服务器拒绝了密码 的解决方案
参考文章:https://blog.csdn.net/weixin_38554662/article/details/80589852 但是需要注意的是,ssh_config文件本来是没有权限修改的, ...
- Java学习之多线程(定义)
进程:正在运行中的程序线程:负责执行程序的控制单元(执行路径)一个进程中可以有多个执行路径,称之为多线程一个进程中至少要有一个线程 创建新执行线程有两种方式 一.继承Thread类步骤:1.定义一个类 ...
- 通过注册表修改IE的Internet选项
Internet Explorer 安全区域设置存储在以下注册表子项下面: HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\I ...
- springboot 尚桂谷学习笔记03
------spring boot 与日志------ 日志框架: 市面上的日志框架: jul jcl jboss-logging logback log4j log4j2 ...... 左边一个门面 ...
- python网络爬虫实战之快速入门
本系列从零开始阐述如何编写Python网络爬虫,以及网络爬虫中容易遇到的问题,比如具有反爬,加密的网站,还有爬虫拿不到数据,以及登录验证等问题,会伴随大量网站的爬虫实战来进行. 我们编写网络爬虫最主要 ...
- UVA 12672 Eleven(DP)
12672 - Eleven Time limit: 5.000 seconds In this problem, we refer to the digits of a positive integ ...
- Python3学习笔记(MOOC)
文本进度条实例 #!/usr/bin/env python3 import time #for i in range(101): # print ("\r{:3.0f}%".for ...