首页 > 代码库 > ng-select 下拉的两种方式
ng-select 下拉的两种方式
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div ng-app="myapp" ng-controller="myctrl">
<select ng-model="data" >
<option value="">选择地址</option>
<option ng-repeat="x in name">{{x}}</option>
</select>
</div>
<div ng-app="app1" ng-controller="myctrl1" id="a">
<select ng-options="x for x in name" ng-model="name">//必须添加ng-model
<option value=""></option>
</select>
<select ng-model="p" ng-options="x.id as x.name for x in gg"></select>//便利数组对象
{{p}}//输出对象的ID
<select ng-model="a" ng-options="x.id as x.name group by x.key for x in gs"></select>//便利jeson并分组
</div>
</body>
<script src="http://www.mamicode.com/js/angurlar素材/angular/angular.js"></script>
<script>
var app =angular.module("myapp",[]).controller("myctrl",function($scope){
$scope.name=["关关","xsss","sss"]
});//运用ng-repeat完成项目
var a=document.querySelector("#a");
console.log(a)
angular.module("app1",[]).controller("myctrl1",function($scope){
$scope.name=["关关","x","sss"]//定义数组
$scope.gg=[{id:1,name:"guanguan"}
{id:2,name:"kankang"}
]
$scope.gs=[
{id:1,name:"关关",key:"我的好友"},
{id:2,name:"中中",key:"我的好友"},
{id:3,name:"亮亮",key:"我的好友"},
{id:4,name:"小小",key:"黑名单"},
]
});//运用ng-options完成
angular.bootstrap(a,["app1"])//运用bootstrop完成多个模块加载
</script>
</html>
ng-select 下拉的两种方式