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';}]);
<form ng-controller="FrmController">

<select ng-model="m.myColor" ng-options="color.name as color.name for color in colors">

</select>

</form>

----------------------------
$scope.m = $scope.colors[0];

<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>
也可以不用switch用ng-show/hide或者ng-if这样的。

angularjs的select使用2的更多相关文章

  1. AngularJS下拉列表select在option动态变化之后多出了一个错误项的问题

    场景: Select初始化之后,选中select的某个选项 通过AngularJS更新select的选项 错误写法: HTML(使用ng-repeat) <div ng-app="Te ...

  2. AngularJS的select设置默认值

    AngularJS的select设置默认值 在使用Angular时候使用select标签时会遇到绑定数据指定默认显示值可这样实现 <!DOCTYPE html> <html ng-a ...

  3. 关于angularjs的select下拉列表存在空白的解决办法

    angularjs 的select的option是通过循环造成的,循环的方式可能有ng-option或者</option  ng-repeat></option>option中 ...

  4. AngularJS初始化Select选择框

    一.引入 之前一个离职的同事负责的项目大量的引入了AngularJS的JS框架,后来我接手相关他项目里的功能.由于对AngularJS不是太熟,在他的功能上进行二次开发就比较费劲了,印象比较深的一个就 ...

  5. Angularjs实现select的下拉列表

    练习使用angularjs实现一个select下拉列表: <div ng-app="selectApp" ng-controller="selectControll ...

  6. AngularJS：Select

    ylbtech-AngularJS:Select 1.返回顶部 1. AngularJS Select(选择框) AngularJS 可以使用数组或对象创建一个下拉列表选项. 使用 ng-option ...

  7. angularjs 下select中ng-options使用

    当我有一堆object数据要用下拉框进行显示选择时,可以使用到angularjs中的select中的ng-options的属性.官网网址:https://docs.angularjs.org/api/ ...

  8. AngularJs的Select演示

    昨天需要在项目使用Angular.js的select,测试了好久才研究出怎么进行赋值,操作. HTML代码 <!DOCTYPE html> <html> <head> ...

  9. angularJs绑定select的正确姿势

    最近在项目中使用ionic,需要在页面上绑定一个年份下拉框,默认选中当前年,并且在下拉框的change事件中增加一些业务逻辑. 不管是使用ng-repeat还是ng-options,都是各种坑:默认选 ...

  10. angularJS中select元素的应用浅析

    select array 数据: select ng-model 用法: 1.可以是一个对象形式,ng-model="test" $scope.test = {name: &quo ...

随机推荐

  1. 简单数学算法demo和窗口跳转,关闭,弹框

     简单数学算法demo和窗口跳转,关闭,弹框demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  2. python中的_ElementUnicodeResult是什么

    _ElementUnicodeResult在python中是字符串的一种,因为在python3中,字符串就是指以unicode编码规则存储的数据,而以其他方式如utf-8,ASCII编码方式存储的数据 ...

  3. STM32几个IO的工作模式

    浮空,顾名思义就是浮在空中,上面用绳子一拉就上去了,下面用绳子一拉就沉下去了.  开漏,就等于输出口接了个NPN三极管,并且只接了e,b. c极 是开路的,你可以接一个电阻到3.3V,也可以接一个电阻 ...

  4. 软件-Axure：Axure RP

    ylbtech-软件-Axure:Axure RP Axure RP是一款专业的快速原型设计工具.Axure(发音:Ack-sure),代表美国Axure公司:RP则是Rapid Prototypin ...

  5. jmeter添加自定义扩展函数之MD5加密

    1,打开eclipse,新建maven工程,在pom中引用jmeter核心jar包,具体请看---https://www.cnblogs.com/guanyf/p/10863033.html---,这 ...

  6. js判断客户端是pc还是移动端

    navigator.userAgentNavigator 对象包含有关浏览器的信息.没有应用于 navigator 对象的公开标准,不过所有浏览器都支持该对象.userAgent 属性是一个只读的字符 ...

  7. taintCheck的实现

    参考:http://bitblaze.cs.berkeley.edu/papers/taintcheck-full.pdf 1. 应用taint analysis需要解决三个问题 a. 哪些input ...

  8. dubbo远程服务调用和maven依赖的区别

    dubbo:跨系统通信.比如:两个系统,一个系统A作客户端,一个系统B作服务器, 服务器B把自己的接口定义提供给客户端A,客户端A将接口定义在spring中的bean.客户端A可直接使用这个bean, ...

  9. js日历算法

    页面 <div class="un1"> <h2>服务档期</h2> <div class="date-panel" ...

  10. maxim - Android UI压力测试

    项目介绍 项目地址:https://github.com/zhangzhao4444/Maxim 与monkey对比优势: 快 稳:只进行有意义的操作,防误点状态栏,不会乱断网.卸载应用 支持脱机运行 ...