AngularJS selectbox 간단한 예제

mirinae.maru

■ $scope.userList 모델을 ng-repeat를 이용하여 selectbox로 표현한 예제

<!DOCTYPE html>
<html ng-app="myApp">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<head>
<title></title>
<script src="/js/angularjs/1.5.6/angular.js"></script>
<script>
var myApp = angular.module("myApp",[]);
myApp.controller("myAppCtrl", function($scope){
$scope.data = {
  userId    : ""
}
$scope.userList = [
  {id:"",name:"ALL"},
  {id:"aaa",name:"김유신"},
  {id:"bbb",name:"신유신"},
  {id:"ccc",name:"박유신"},
  {id:"ddd",name:"최유신"},
  {id:"eee",name:"유유신"}
];
});
</script>
</head>
<body ng-controller="myAppCtrl">
<h1>
  AngularJS selectbox 사용예 1<br/>
  <font color="red">
    $scope.userList를 selectbox로 표현
  </font>
</h1>
<hr/>
<div>
  <label>사용자 목록</label>
  <select ng-model="data.userId" name="userId">
    <option ng-repeat="row in userList" value="{{row.id}}">{{row.name}}</option>
  </select>
  <label>선택된 사용자</label>
  <font color="blue">{{data.userId}}</font>                 
</div>
</body>
</html>

 
 
 

■ 실행 결과