AngularJS入门教程之Select(选择框)详解
AngularJSSelect(选择框)
AngularJS可以使用数组或对象创建一个下拉列表选项。
使用ng-options创建选择框
在AngularJS中我们可以使用ng-option指令来创建一个下拉列表，列表项通过对象和数组循环输出，如下实例:
实例
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<scriptsrc="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<divng-app="myApp"ng-controller="myCtrl">
<selectng-model="selectedName"ng-options="xforxinnames">
</select>
</div>
<script>
varapp=angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.names=["Google","Runoob","Taobao"];
});
</script>
<p>该实例演示了ng-options指令的使用。</p>
</body>
</html>
运行结果：
该实例演示了ng-options指令的使用。
ng-options与ng-repeat
我们也可以使用ng-repeat指令来创建下拉列表：
实例
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<scriptsrc="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<divng-app="myApp"ng-controller="myCtrl">
<select>
<optionng-repeat="xinnames">{{x}}</option>
</select>
</div>
<script>
varapp=angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.names=["Google","Runoob","Taobao"];
});
</script>
<p>该实例演示了使用ng-repeat指令来创建下拉列表。</p>
</body>
</html>
运行结果：
该实例演示了使用ng-repeat指令来创建下拉列表。
ng-repeat指令是通过数组来循环HTML代码来创建下拉列表，但ng-options指令更适合创建下拉列表，它有以下优势：
使用ng-options的选项的一个对象，ng-repeat是一个字符串。
应该用哪个更好?
假设我们使用以下对象:
$scope.sites=[
{site:"Google",url:"http://www.google.com"},
{site:"Runoob",url:"http://www.runoob.com"},
{site:"Taobao",url:"http://www.taobao.com"}
];
ng-repeat有局限性，选择的值是一个字符串:
实例
使用ng-repeat:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<scriptsrc="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<divng-app="myApp"ng-controller="myCtrl">
<p>选择网站:</p>
<selectng-model="selectedSite">
<optionng-repeat="xinsites"value="{{x.url}}">{{x.site}}</option>
</select>
<h1>你选择的是:{{selectedSite}}</h1>
</div>
<script>
varapp=angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.sites=[
{site:"Google",url:"http://www.google.com"},
{site:"Runoob",url:"http://www.runoob.com"},
{site:"Taobao",url:"http://www.taobao.com"}
];
});
</script>
<p>该实例演示了使用ng-repeat指令来创建下拉列表，选中的值是一个字符串。</p>
</body>
</html>
运行效果：
选择网站：
你选择的是：http://www.google.com
该实例演示了使用ng-repeat指令来创建下拉列表，选中的值是一个字符串。
使用ng-options指令，选择的值是一个对象：
实例
使用ng-options:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<scriptsrc="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<divng-app="myApp"ng-controller="myCtrl">
<p>选择网站:</p>
<selectng-model="selectedSite"ng-options="x.siteforxinsites">
</select>
<h1>你选择的是:{{selectedSite.site}}</h1>
<p>网址为:{{selectedSite.url}}</p>
</div>
<script>
varapp=angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.sites=[
{site:"Google",url:"http://www.google.com"},
{site:"Runoob",url:"http://www.runoob.com"},
{site:"Taobao",url:"http://www.taobao.com"}
];
});
</script>
<p>该实例演示了使用ng-options指令来创建下拉列表，选中的值是一个对象。</p>
</body>
</html>
运行效果：
选择网站：
你选择的是：google
该实例演示了使用ng-options指令来创建下拉列表，选中的值是一个对象。
当选择值是一个对象时，我们就可以获取更多信息，应用也更灵活。
数据源为对象
前面实例我们使用了数组作为数据源，以下我们将数据对象作为数据源。
$scope.sites={
site01:"Google",
site02:"Runoob",
site03:"Taobao"
};
ng-options使用对象有很大的不同，如下所示：
实例
使用对象作为数据源,x为键(key),y为值(value):
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<scriptsrc="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<divng-app="myApp"ng-controller="myCtrl">
<p>选择的网站是:</p>
<selectng-model="selectedSite"ng-options="xfor(x,y)insites">
</select>
<h1>你选择的值是:{{selectedSite}}</h1>
</div>
<p>该实例演示了使用对象作为创建下拉列表。</p>
<script>
varapp=angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.sites={
site01:"Google",
site02:"Runoob",
site03:"Taobao"
};
});
</script>
</body>
</html>
运行效果：
选择的网站是：
你选择的值是：Google
该实例演示了使用对象作为创建下拉列表。
你选择的值为在key-value对中的value。
value在key-value对中也可以是个对象：
实例
选择的值在key-value对的value中,这是它是一个对象:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<scriptsrc="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<divng-app="myApp"ng-controller="myCtrl">
<p>选择一辆车:</p>
<selectng-model="selectedCar"ng-options="xfor(x,y)incars">
</select>
<h1>你选择的是:{{selectedCar.brand}}</h1>
<h2>模型:{{selectedCar.model}}</h2>
<h3>颜色:{{selectedCar.color}}</h3>
<p>注意选中的值是一个对象。</p>
</div>
<script>
varapp=angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.cars={
car01:{brand:"Ford",model:"Mustang",color:"red"},
car02:{brand:"Fiat",model:"500",color:"white"},
car03:{brand:"Volvo",model:"XC90",color:"black"}
}
});
</script>
</body>
</html>
运行结果：
选择一辆车
你选择的是：Fiat
模型：500
颜色：white
注意：选中的值是一个对象。
在下拉菜单也可以不使用key-value对中的key,直接使用对象的属性：
实例：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<scriptsrc="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<divng-app="myApp"ng-controller="myCtrl">
<p>选择一辆车:</p>
<selectng-model="selectedCar"ng-options="y.brandfor(x,y)incars"></select>
<p>你选择的是:{{selectedCar.brand}}</p>
<p>型号为:{{selectedCar.model}}</p>
<p>颜色为:{{selectedCar.color}}</p>
<p>下拉列表中的选项也可以是对象的属性。</p>
</div>
<script>
varapp=angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.cars={
car01:{brand:"Ford",model:"Mustang",color:"red"},
car02:{brand:"Fiat",model:"500",color:"white"},
car03:{brand:"Volvo",model:"XC90",color:"black"}
}
});
</script>
</body>
</html>
运行结果：
选择一辆车：
你选择的是：Ford
型号为：Mustang
颜色为：red
下拉列表中的选项也可以是对象的属性。
以上就是对AngularJSSelect资料的整理，后续继续补充，希望能帮助有需要的朋友。