AngularJS 선택
AngularJS는 배열이나 객체를 사용하여 옵션 드롭다운 목록을 만들 수 있습니다.
ng-options를 사용하여 선택 상자 만들기
AngularJS에서는 ng-option 지시어를 사용하여 드롭다운 목록을 만들 수 있습니다. 목록 항목은 아래와 같이 루프의 개체와 배열을 통해 출력됩니다. :
예
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Google", "Runoob", "Taobao"];
});
</script>
<p>该实例演示了 ng-options 指令的使用。</p>
</body>
</html> 인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
ng-options with ng-repeat
또한 ng를 사용할 수도 있습니다 -repeat 명령을 사용하여 드롭다운 목록 생성:
예제
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Google", "php.cn", "Taobao"];
});
</script>
<p>该实例演示了使用 ng-repeat 指令来创建下拉列表。</p>
</body>
</html>예제 실행»
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요
ng-repeat 지침 드롭다운 목록을 생성하기 위해 배열을 통해 HTML 코드를 반복하는 것이지만 ng-options 명령이 드롭다운 목록 생성에 더 적합하며 다음과 같은 장점이 있습니다.
객체 ng-options 사용 옵션 중 ng-repeat는 문자열입니다.
어느 것이 더 나을까요?
다음 개체를 사용한다고 가정해 보겠습니다.
$scope.sites = [
{site : "Google", url : "http://www.google.com"},
{site : "php", url : "http://www.php.cn"},
{site : "Taobao", url : "http://www.taobao.com"}
];ng-repeat 제한이 있습니다. 선택한 값은 문자열입니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>选择网站:</p>
<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>
<h1>你选择的是: {{selectedSite}}</h1>
</div>
<script>
var app = 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>Run 인스턴스 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
ng-options 지시어를 사용하세요. 선택한 값은 객체입니다:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>选择网站:</p>
<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>
<h1>你选择的是: {{selectedSite.site}}</h1>
<p>网址为: {{selectedSite.url}}</p>
</div>
<script>
var app = 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>인스턴스 실행 »
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요.
선택 값이 개체이면 더 많은 정보를 얻을 수 있고 응용 프로그램이 더 유연해집니다.
데이터 소스는 객체입니다
이전 예에서는 배열을 데이터 소스로 사용했습니다. 다음 예에서는 데이터 객체를 데이터 소스로 사용합니다.
$scope.sites = {
site01 : "Google",
site02 : "php",
site03 : "Taobao"
};ng-options 객체 사용은 다음과 같이 매우 다릅니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>选择的网站是:</p>
<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
</select>
<h1>你选择的值是: {{selectedSite}}</h1>
</div>
<p>该实例演示了使用对象作为创建下拉列表。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.sites = {
site01 : "Google",
site02 : "Runoob",
site03 : "Taobao"
};
});
</script>
</body>
</html>Run Instance »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
선택한 값은 키-값 쌍의 값입니다.
value는 키-value 쌍의 개체일 수도 있습니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>选择一辆车:</p>
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>你选择的是: {{selectedCar.brand}}</h1>
<h2>模型: {{selectedCar.model}}</h2>
<h3>颜色: {{selectedCar.color}}</h3>
<p>注意选中的值是一个对象。</p>
</div>
<script>
var app = 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>Run Instance»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
드롭다운 메뉴의 key 값 쌍에서 key를 사용하고 객체의 속성을 직접 사용할 수도 있습니다:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>选择一辆车:</p>
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"></select>
<p>你选择的是: {{selectedCar.brand}}</p>
<p>型号为: {{selectedCar.model}}</p>
<p>颜色为: {{selectedCar.color}}</p>
<p>下拉列表中的选项也可以是对象的属性。</p>
</div>
<script>
var app = 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>인스턴스 실행»
"실행"을 클릭합니다. 인스턴스' 버튼을 누르면 온라인 인스턴스를 볼 수 있습니다
