Angularjs Select (선택 상자)
AngularJS는 배열 또는 객체를 사용하여 드롭 다운 목록 옵션을 만들 수 있습니다.
NG-OPTION을 사용하여 선택 상자를 만듭니다
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 for x for x for select> </div> <cript> var app = angular.module ( 'myapp', []); App.Controller ( 'myctrl', function ($ scope) {$ scope.name.name = [" "" "" "" "" "". " "taobao"];}); </script> <p>이 예는 NG-Options 지시문의 사용을 보여줍니다. </p> </body> </html>실행 결과 :
이 예는 NG-Options 지시문의 사용을 보여줍니다.
NG-OPTIONS 및 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> <옵션 ng-repeat = "x names"> {{x}} </옵션> </select> </div> <cript> var app = angular.module ( 'myApp'); App.Controller ( 'myctrl', function ($ scope) {$ scope.name = [ "" "" "" ", "taobao"];}); </script> <p>이 예는 NG-Repeat 지침을 사용하여 드롭 다운 목록을 작성합니다. </p> </body> </html>실행 결과 :
이 예제는 NG-Repeat 지시문을 사용하여 드롭 다운 목록을 작성합니다.
NG-Repeat Directive는 배열 To Loop HTML 코드를 사용하여 드롭 다운 목록을 작성하지만 NG-Options 지시문은 드롭 다운 목록을 작성하는 데 더 적합하며 다음과 같은 장점이 있습니다.
NG-OPTIONS 옵션을 사용하는 객체 인 NG-Repeat는 문자열입니다.
어느 것이 더 나아질까요?
다음 객체를 사용한다고 가정합니다.
$ scope.sites = [{site : "google", url : "http://www.google.com"}, {사이트 : "runoob", url : "http://www.runoob.com"}, {site : "taobao", url : "http://www.com"};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"> <p> 웹 사이트 선택 : </p> <select ng-model = "selectedSite"> <옵션 ng-repeat = "x sites"value = "{{x.url}}"> {{x.site}} </옵션> <h1> 당신은 선택했습니다 : {{selectedSite}} </h1> </div> </div> <cript> var app = angular.module ( 'myapp', []); app.controller ( 'myctrl', function ($ scope) {$ scope.sites = [{site : "google", url : "http://www.gogle.com" "http://www.runoob.com"}, {site : "taobao", url : "http://www.taobao.com"}];}); </script> <p>이 예제는 NG-Repeative를 사용하여 드롭 다운 목록을 작성하고 선택한 값은 끈입니다. </p> </body> </html>실행 효과 :
웹 사이트 선택 :
귀하의 선택은 http://www.google.com입니다
이 예제는 NG-Repeat 지시문을 사용하여 드롭 다운 목록을 작성하고 선택한 값은 문자열입니다.
NG-Options 지시문을 사용하여 선택한 값은 객체입니다.
예
NG-OPTIONS 사용 :
<! 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> <ng-model = "selectsite"ng-options = "x.site sites in sitees"> </select> <h1> 선택했습니다 : {{selectedsite.site}} </h1> <p> url is : {{selectedsite.site}} <p> {{selectedSite.url}} </p> </p> </div> <cript> var app = angular.module ( 'myapp', []); app.controller ( 'myctrl', function ($ scope) {$ scope.sites = [{site : "google", url : "http://ww.c." : "http://www.runoob.com"}, {site : "taobao", url : "http://www.taobao.com"}); </script> <p>이 예는 드롭 다운 목록을 만들기위한 NG-Options 지침의 사용을 보여줍니다. </p> </body> </html>실행 효과 :
웹 사이트 선택 :
당신은 선택했다 : Google
URL은 http://www.google.com입니다
이 예제는 NG-Options 지시문을 사용하여 드롭 다운 목록을 작성하고 선택한 값은 객체입니다.
값을 객체로 선택할 때 더 많은 정보를 얻을 수 있으며 응용 프로그램이 더 유연합니다.
객체로서의 데이터 소스
이전 예에서는 배열을 데이터 소스로 사용했으며 아래에서 데이터 객체를 데이터 소스로 사용했습니다.
$ scope.sites = {site01 : "google", site02 : "runoob", site03 : "taobao"};NG-Options는 다음과 같이 매우 다른 객체를 사용합니다.
예
객체를 데이터 소스로 사용하고 x는 키이고 y는 값입니다.
<! 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)"> </select> <h1> 선택한 값은 다음과 같습니다. </p> <cript> var app = angular.module ( 'myapp', []); app.controller ( 'myctrl', function ($ scope) {$ scope.sites = {site01 : "google", site02 : "runoob", site03 : "taobao"}); </html> </html>실행 효과 :
선택된 웹 사이트는 다음과 같습니다.
선택한 값은 다음과 같습니다. Google
이 예제는 물체를 드롭 다운 목록으로 사용하는 것을 보여줍니다.
선택한 값은 키 값 쌍의 값입니다.
값은 키 값 쌍의 객체가 될 수 있습니다.
예
선택된 값은 키 값 쌍의 값에 있습니다.
<! 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> <ng-model = "selectedcar"ng-options = "x for (x, y)"> </select> <h1> 선택 : {{selectedcar.brand}} <h2> 모델 : {{selectedCar.Model}}} </h2> <h3> 색상 : {{selectedCar.Color}} </h3> <p> 선택한 값은 객체입니다. </p> </div> <cript> var app = angular.module ( 'myapp', []); app.controller ( 'myctrl', function ($ scope) {$ scope.cars = {car01 : {브랜드 : "ford", 모델 : "mustang", color : "red"}, car02 : {fiat ", model", "" ",", ",", ", car03 : {브랜드 : "볼보", 모델 : "xc90", 색상 : "black"}}}); </script> </body> </html>실행 결과 :
차를 선택하십시오
당신은 선택 : 피아트
모델 : 500
색상 : 흰색
참고 : 선택한 값은 객체입니다.
키 값 쌍을 사용하는 대신 키 값 쌍의 키를 사용하고 객체의 속성을 직접 사용할 수 있습니다.
예:
<! 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> <ng-model = "selectedcar"ng-options = "y.brand for (x, y)"> </select> <p> 선택한 {{selectedcar.brand}} </p> <p> 모델 IS : { {{selectedCar.Model}} </p> <p> 색상은 다음과 같습니다. {{selectedCar.Color}} </p> <p> 드롭 다운 목록의 옵션도 객체의 속성이 될 수 있습니다. </p> </div> <cript> var app = angular.module ( 'myapp', []); app.controller ( 'myctrl', function ($ scope) {$ scope.cars = {car01 : {브랜드 : "ford", 모델 : "mustang", color : "red"}, car02 : {fiat ", model", "" ",", ",", ", car03 : {브랜드 : "볼보", 모델 : "xc90", 색상 : "black"}}}); </script> </body> </html>실행 결과 :
자동차 선택 :
당신의 선택은 : 포드입니다
모델 : 머스탱
색상은 : 빨간색입니다
드롭 다운 목록의 옵션은 객체의 속성 일 수도 있습니다.
위의 것은 AngularJS Select Information의 편집이며 나중에 계속 추가 할 것입니다. 도움이 필요한 친구들을 도울 수 있기를 바랍니다.