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. paper 164: Siamese网络--相似度量方法

    简介:    Siamese网络是一种相似性度量方法,当类别数多,但每个类别的样本数量少的情况下可用于类别的识别.分类等.传统的用于区分的分类方法是需要确切的知道每个样本属于哪个类,需要针对每个样本有 ...

  2. <HTTP权威指南>记录 ---- 网络爬虫

    网络爬虫 网络爬虫(web crawler)能够在无需人类干预的情况下自动进行一系列Web事务处理的软件程序.很多爬虫会从一个Web站点逛到另一个Web站点,获取内容,跟踪超链,并对它们找到的数据进行 ...

  3. GH001 on github

    remote: warning: GH001: Large files detected. You may want to try Git Large File Storage - https://g ...

  4. java并发编程笔记(九)——多线程并发最佳实践

    java并发编程笔记(九)--多线程并发最佳实践 使用本地变量 使用不可变类 最小化锁的作用域范围 使用线程池Executor,而不是直接new Thread执行 宁可使用同步也不要使用线程的wait ...

  5. 信息安全-攻击-XSS:XSS/CSS 攻击

    ylbtech-信息安全-攻击-XSS:XSS/CSS 攻击 XSS攻击通常指的是通过利用网页开发时留下的漏洞,通过巧妙的方法注入恶意指令代码到网页,使用户加载并执行攻击者恶意制造的网页程序.这些恶意 ...

  6. 如何保存android app日志

    android 手机日志保存方法如下: 前置条件:已安装adb 1,手机usb连接电脑,打开USB调试模式(注意仅连接一台手机设备) 2,win+R输入cmd打开命令窗口,输入指令:adb devic ...

  7. VC6.0在Win8,10下的兼容性调整

    Microsoft Visual C++ 6.0,简称VC6.0,是微软推出的一款C++编译器,将“高级语言”翻译为“机器语言(低级语言)”的程 序.Visual C++是一个功能强大的可视化软件开发 ...

  8. “希希敬敬对”队软件工程第九次作业-beta冲刺第三次随笔

    “希希敬敬对”队软件工程第九次作业-beta冲刺第三次随笔 队名:  “希希敬敬对” 龙江腾(队长) 201810775001 杨希                   201810812008 何敬 ...

  9. Docker镜像仓库的搭建--> Harbor篇

    简介 Harbor是VMware公司开源的一个企业级Docker Registry项目,项目地址:https://github.com/goharbor/harbor Harbor作为一个企业级私有R ...

  10. dbvisualizer设置自动补全不显示模式名