昨天需要在项目使用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. 通过redis的monitor命令排除故障

    项目里有10台服务器都在一个刀箱里,其中一台是redis缓存服务器,另外的是app服务器.通过监控发现这个刀箱的流量750M,其中缓存服务器的流量达105M,这么高的流量已经造成其它项目的服务器网络延 ...

  2. 解决拼团首页swiper组件手动轮播卡顿问题

    解决 swiper lag , 可能是渲染背景backface-visibility后导致卡顿吧! //以下代码添加到.swiper-wrapper中 -webkit-perspective: 300 ...

  3. Mybatis+SpringMVC实现分页查询（附源码）

    Maven+Mybatis+Spring+SpringMVC实现分页查询(附源码) 一.项目搭建 关于项目搭建,小宝鸽以前写过一篇Spirng+SpringMVC+Maven+Mybatis+MySQ ...

  4. OpenGL ES2.0基础入门

    1.OpenGL ES 1.x渲染管线(又称为渲染流水线) (1).基本处理: 基本处理主要是设定3D空间中物体的顶点坐标.顶点对应的颜色.顶点的纹理坐标等属性,并且指定绘制方式. 常见的绘制方式有: ...

  5. poj--1579--（DFS+记忆化搜索之经典）

    记忆化搜索   记忆化搜索:算法上依然是搜索的流程,但是搜索到的一些解用 动态规划的那种思想和模式作一些保存. 一般说来,动态规划总要遍历所有的状态,而搜索可以排除一些无效状态. 更重要的是搜索还可以 ...

  6. Java 实现字符串反转

    方法一: public class StringReverse { public void swap(char[] arr, int begin, int end) { while(begin < ...

  7. 独立硬盘冗余阵列与HDFS

    http://zh.wikipedia.org/wiki/RAID 独立硬盘冗余阵列(RAID, Redundant Array of Independent Disks),旧称廉价磁盘冗余阵列(Re ...

  8. 【IOS】关于CGTransform的几个动画

    1.CGTransform主要三大功能,平移(Translation).缩放(Scale).旋转(Rotate). 平移: self.imageView.transform = CGAffineTra ...

  9. HDU 1756 Cupid's Arrow 判断点在多边形的内部

    Cupid's Arrow Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tot ...

  10. .net之页面生面周期

    # 事件或方法 功能 描述 1 Init 事件 页面初始化 页面生存周期中的第一个阶段是初始化.当 Init 事件发生时,在.aspx 源文件中静态声明的所有控件都已实例化并取其默认值.应该注意的是, ...