angularjs Select下拉選擇寬
阿新 • • 發佈：2019-02-20
<!DOCTYPE html>
<html>
<head>
<title>angularjs下拉選擇框</title>
<meta charset="utf-8" />
<script src="angular/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="mySelect" ng-options="x.site for x in sites"></select>
<h1>{{mySelect.site}}</h1>
<p>{{mySelect.url}}</p>
</div>
<script>
angular.module("myApp",[]).controller("myCtrl",function($scope){
$scope.sites = [
{site : "google", url:"http://www.baidu.com"},
{site : "Runoob", url : "http://www.runoob.com"},
{site : "Taobao", url : "http://www.taobao.com"}
];
});
</script>
</body>
<html>
<head>
<title>angularjs下拉選擇框</title>
<meta charset="utf-8" />
<script src="angular/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="mySelect" ng-options="x.site for x in sites"></select>
<h1>{{mySelect.site}}</h1>
<p>{{mySelect.url}}</p>
</div>
<script>
angular.module("myApp",[]).controller("myCtrl",function($scope){
$scope.sites = [
{site : "google", url:"http://www.baidu.com"},
{site : "Runoob", url : "http://www.runoob.com"},
{site : "Taobao", url : "http://www.taobao.com"}
];
});
</script>
</body>
</html>
ng-options中的x就是出現在下拉框中的選項，也是sites陣列中的某一項。要出現該項中的哪一種屬性，我們都可以很輕鬆的定製。而ng-model的值就是選中的某一個物件的值。可以很方便的操作其屬性！