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 ...
随机推荐
- flutter网格布局之GridView组件
前面总结了使用ListView来实现列表,但是,有的时候,数据量很大,需要使用矩阵方式排列才能更清晰的展示数据,在flutter中,可以使用网格列表组件GridView来实现这个布局. GridVie ...
- java配置和tomcat安装
原文: https://www.cnblogs.com/lwjboke/p/7089126.html 下载: jdk历史版本 下载地址: http://www.oracle.com/technetwo ...
- codeforces 557D Vitaly and Cycle
题意简述 给定一个图 求至少添加多少条边使得它存在奇环 并求出添加的方案数 (注意不考虑自环) ---------------------------------------------------- ...
- Map-Amap:自定义地图
ylbtech-Map-Amap:自定义地图 1.返回顶部 1. http://lbs.amap.com/getting-started/mapstyle 2. 2.返回顶部 1. 自定义地图,地图从 ...
- delphi 在代码中 添加 TO-DO 并且 管理
TO-DO List是一项非常好用的功能.采用她可以让我们很清楚的了解以前完成了那些任务,还有哪些任务需要做,由谁负责完成,是不是比较紧急的任务等.今天来不及完成的,明天上班就可以很快的找到任务所在的 ...
- 利用hover,制作点击有缩放效果
.tab-pic-wrap .pic-wrap .list li a:hover img { transform: scale(1.03); } .tab-pic-wrap .pic-wrap .li ...
- 一、Vue分页实现
一.Vue分页实现 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equ ...
- AtCoder Beginner Contest 130 F Minimum Bounding Box 三分法求极值(WA)
题意:给n个点的起始坐标以及他们的行走方向,每一单位时间每个点往它的方向移动一单位.问最小能包围所有点的矩形. 解法:看到题目求极值,想了想好像可以用三分法求极值,虽然我也不能证明面积是个单峰函数. ...
- 深度探索C++对象模型第四章:函数语义学
C++有三种类型的成员函数:static/nonstatic/virtual 一.成员的各种调用方式 C with class 只支持非静态成员函数(Nonstatic member function ...
- Vue的路有拦截与axios的封装
一丶首先我们先创建api与utils两个文件夹 二丶api文件夹里面新建文件api.js import request from "../utils/http" import qs ...