昨天需要在项目使用Angular.js的select，测试了好久才研究出怎么进行赋值，操作。

HTML代码

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.11/angular.min.js"></script>

        <title>RunJS</title>

    <link id="bootstrap_221" rel="stylesheet" type="text/css" class="library" href="/js/sandbox/bootstrap-2.2.1/css/bootstrap.min.css">

    <script id="jquery_172" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.7.2.min.js"></script>

    <script id="bootstrap_221" type="text/javascript" class="library" src="/js/sandbox/bootstrap-2.2.1/js/bootstrap.min.js"></script>

    </head>

</html>

JS代码：

var appDemo = angular.module('appDemo',[]);

appDemo.controller('selectDemo',function($scope){

    $scope.itemList=[

        {value:0,class:'水果',name:'苹果',color:'红色'},

        {value:1,class:'水果',name:'香蕉',color:'黄色'},

        {value:2,class:'蔬菜',name:'茄子',color:'紫色'},

        {value:3,class:'水果',name:'葡萄',color:'紫色'},

        {value:4,class:'水果',name:'黄瓜',color:'绿色'},

        {value:5,class:'水果',name:'鸭梨',color:'黄色'},

        {value:6,class:'蔬菜',name:'菠菜',color:'绿色'},

    ];

});

RunJs演示地址

AngularJs的Select演示的更多相关文章

  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的正确姿势

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

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

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

随机推荐

  1. 阿里云ECS试用

    公司在推一个大项目,感觉阿里云挺好用的,自己搞了台小机器平时可以跑着玩,而且可以做个跳板机,平时学校里的收费网直接用跳板机就可以访问了,直接写个脚本在自己机器上跑一下: #!/usr/bin/expe ...

  2. osg配置

    编辑器加载中..OSG+VS2010+win7环境搭建 Win7下 osg+vs2010环境搭建 一．相关准备 a) Osg源码 当前最新版:OpenSceneGraph的3.0.0.zip 下载链接 ...

  3. 高效算法——Most financial institutions 贪心 H

    H - 贪心 Crawling in process... Crawling failed Time Limit:3000MS     Memory Limit:0KB     64bit IO Fo ...

  4. hdu4696 想法题

    就像1.2元人民币可以凑成任意你想要的面值一样.由于一定会有环,只要有C[i] == 1 就可以造成任何数.够坑吧 #include <cstdio> #include <cstri ...

  5. python 解析xml 文件: SAX方式

    环境 python:3.4.4 准备xml文件 首先新建一个xml文件,countries.xml.内容是在python官网上看到的. <?xml version="1.0" ...

  6. Double与BigDecimal 比较

    1] 精确的浮点运算: 在Java里面,有时候为了保证数值的准确性需要精确的数据,先提供一个例子就可以发现问题了: public class FloatNumberTester { public st ...

  7. AngularJS $on $broadcast $emit

    如何在作用域之间通信呢?    1.创建一个单例服务,然后通过这个服务处理所有子作用域的通信.    2.通过作用域中的事件处理通信.但是这种方法有一些限制:例如,你并不能广泛的将事件传播到所有监控的 ...

  8. 从一个简单的Java单例示例谈谈并发 JMM JUC

    原文: http://www.open-open.com/lib/view/open1462871898428.html 一个简单的单例示例 单例模式可能是大家经常接触和使用的一个设计模式,你可能会这 ...

  9. 关于node升级到7.0，无法gulp alljs的问题

    http://stackoverflow.com/questions/40308623/cannot-find-module-internal-fs-afer-upgrading-to-node-7 ...

  10. [Angular 2] Using ng-model for two-way binding

    Two-way binding still exists in Angular 2 and ng-model makes it simple. The syntax is a combination ...