昨天需要在项目使用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. c++学习(1)

    c++学习(1) 1.const C VS C++: 在c语言中const是一个只读变量(ReadOnly Varible),在c++中const只是代表常量(Constant). 例: const ...

  2. HAProxy、Nginx 配置 HTTP/2 完整指南

    基于最近对HTTP/2的争论和它的优势,是时候升级底层架构了.这篇文章将会介绍如何在安装和配置HAProxy和Ngnix(使用ssl终端).为了简化流程,我建议你准备好使用Docker镜像. 如果你想 ...

  3. Apache-Tika解析XML文档

    通常在使用爬虫时,爬取到网上的文章都是各式各样的格式处理起来比较麻烦,这里我们使用Apache-Tika来处理XML格式的文章,如下: package com.mengyao.tika.app; im ...

  4. Palindrome - POJ 3974 （最长回文子串，Manacher模板）

    题意:就是求一个串的最长回文子串....输出长度. 直接上代码吧,没什么好分析的了.   代码如下: ================================================= ...

  5. 【Java每日一题】20170109

    20170106问题解析请点击今日问题下方的"[Java每日一题]20170109"查看(问题解析在公众号首发,公众号ID:weknow619) package Jan2017; ...

  6. js~this的陷阱

    在JS中,当前对象一般用this表示,在jquery中,当前的对象是用$(this)表示,这些都是最基础的知识,没什么可说的,但我要说的是,当this出现在某个深度时,它的含义你自己要清楚,它是指离当 ...

  7. angular ng-class使用笔记

    在前面Angularjs开发一些经验总结中说到在angular开发中angular controller never 包含DOM元素(html/css),在controller需要一个简单的POJO( ...

  8. HDU4530：小Q系列故事——大笨钟

    Problem Description 饱尝情感苦恼的小Q本打算隐居一段时间,但仅仅在3月25号一天没有出现,就有很多朋友想念他,所以,他今天决定再出来一次,正式和大家做个告别. 小Q近来睡眠情况很差 ...

  9. [Angualr 2] Using FormBuilder

    There are two main functions we’ll use on FormBuilder: • control - creates a new Control• group - cr ...

  10. 解决Win8不能上网攻略第二版！三步秒杀原驱动

    关于Win8消费者预览版的网卡驱动确实是令人头疼的事情,不少用户都抱怨无法联网而且驱动卸载十分麻烦.IT之家社区luoyousi 此前分享<图文教程:解决Win8消费者预览版不能上网问题> ...