AngularJs的Select演示

时间:2023-03-08 15:59:03

昨天需要在项目使用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演示地址