昨天需要在项目使用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. 有关linux下redis overcommit_memory的问题（转）

    一.背景 公司的redis有时background save db不成功,通过log发现下面的告警,很可能由它引起的: [13223] 17 Mar 13:18:02.207 # WARNING ov ...

  2. 线性规划||网络流(费用流)：COGS 288. [NOI2008] 志愿者招募

    [NOI2008] 志愿者招募 输入文件:employee.in   输出文件:employee.out   简单对比 时间限制:2 s   内存限制:512 MB [问题描述] 申奥成功后,布布经过 ...

  3. 图论(差分约束系统)：POJ 1275 Cashier Employment

    Cashier Employment Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 7651   Accepted: 288 ...

  4. linux 下安装配置jboss as7以及部署应用

    linux 下安装配置jboss as7以及部署应用 1.测试平台及软件 centos 5.4 jdk-7u5-linux-i586.rpm jboss-as-7.1.1.Final.zip jbos ...

  5. 10382 - Watering Grass

    Problem E Watering Grass Input: standard input Output: standard output Time Limit: 3 seconds n sprin ...

  6. TestNG关键字和testNG.xml结构学习

    转自官网:http://testng.org/doc/documentation-main.html#test-results TestNG关键字 @BeforeSuite@AfterSuite@Be ...

  7. vue.js学习笔记(一)：什么是mvvm框架，vue.js的核心思想

    一:MVVM框架 MVVM框架的应用场景:  1.针对具有复杂交互逻辑的前端应用 2.提供基础的架构抽象 3.提供ajax数据持久化,保证前端用户体验 二:vue.js的核心思想 (一):数据驱动 ( ...

  8. Ubuntu系统下MySQL读取文件数据ERROR解决

    博文链接:http://haoyuanliu.github.io/2016/04/29/mysql/ 对,我是来骗访问量的!O(∩_∩)O~~ 在使用MySQL进行文件数据读取的时候,在终端敲入命令行 ...

  9. HeadFirst设计模式笔记：（六）命令模式 —— 封装调用

    1.概念 将来自客户端的请求传入一个对象,从而使你可用不同的请求对客户进行参数化.用于“行为请求者”与“行为实现者”解耦,可实现二者之间的松耦合,以便适应变化.分离变化与不变的因素. 在面向对象的程序 ...

  10. [Angular 2] Passing data to components with @Input

    @Input allows you to pass data into your controller and templates through html and defining custom p ...