Latest web development tutorials

AngularJS와 선택 (체크 박스)

AngularJS와 배열이나 객체를 사용하는 옵션의 드롭 다운 목록을 만들 수 있습니다.

NG-옵션을 사용하여 선택 상자 만들기

AngularJS와 우리는 예 다음과 같은 출력의 객체와 배열주기를 통해 드롭 다운 목록, 목록 항목을 만들NG-옵션 명령을 사용할 수 있습니다 :

예

<사업부의 NG-응용 프로그램 = "을 myApp "NG 컨트롤러 = "myCtrl">

<선택 NG 모델 = "selectedName "NG-옵션 = "이름에 X 용 X">
</ 선택>

</ DIV>

<스크립트>
var에 응용 = angular.module ( '을 myApp' , []);
app.controller ( 'myCtrl', 기능 ( $ 범위) {
$ scope.names = [ "구글", "w3big", "Taobao의"];
});
</ 스크립트>

»시도

NG-옵션과 NG 반복

우리는 또한 드롭 다운 목록을 만들NG 반복 지시문을 사용할 수 있습니다 :

예

<선택>
<옵션 NG 반복 = "X 이름에"> {{X}} </ 옵션>
</ 선택>

»시도

NG 반복 명령의 드롭 다운리스트를 만드는 HTML 코드의 배열을 반복하는 것이지만, NG-옵션드롭 다운 목록을 생성하기위한 명령을 더 적합한, 다음의 이점이있다 :

NG-옵션 옵션을사용하여목적은,NG-반복 문자열입니다.

더 나은하는 데 사용되어야 하는가?

우리는 다음과 같은 개체를 사용한다고 가정 

$scope.sites = [
    {site : "Google", url : "http://www.google.com"},
    {site : "w3big", url : "http://www.w3big.com"},
    {site : "Taobao", url : "http://www.taobao.com"}
];

NG-반복은 한계가있다, 선택된 값은 문자열입니다 :

예

사용NG 반복 :

<선택 NG 모델 = "selectedSite ">
<옵션 NG-반복 = "X 사이트에서"값 = "{{x.url}}"> {{x.site}} </ 옵션>
</ 선택>

<H1은> 당신의 선택이 될 것입니다 : {{selectedSite}} </ H1>

»시도

사용NG - 선택 명령은, 오브젝트의 값을 선택

예

NG-옵션을 사용합니다 :

<선택 NG 모델 = "selectedSite ="사이트에서 x의 x.site ","NG-옵션>
</ 선택>

<H1은> 당신의 선택이 될 것입니다 : {{selectedSite.site}} </ H1>
<P> URL은 다음과 같습니다 {{selectedSite.url}} </ P>

»시도

당신은 그 값이 객체 인 선택하면, 우리는 더 많은 정보와 애플리케이션을보다 유연 얻을 수 있습니다.

데이터 소스 오브젝트

이전 예 우리는 데이터 소스에 따라 우리가 다음의 데이터 객체는 데이터 소스와 같은 배열을 사용한다. 

$scope.sites = {
    site01 : "Google",
    site02 : "w3big",
    site03 : "Taobao"
};

다음과 같이 객체를 사용하여NG-옵션은 매우 다르다 :

예

데이터 소스로 물체를 사용하여,X는Y가 값 (값)은 키(열쇠)이다:

<선택 NG 모델 = "selectedSite "NG-옵션 = "사이트에서 (x, y)에 대한 X">
</ 선택>

<H1> 선택한 값 : {{selectedSite}} </ H1>

»시도

당신의 선택은 키 - 값 쌍의 값입니다.

키 - 값 쌍의 값도 대상이 될 수 있습니다 :

예

이 목적이다 값의 키 - 값의 값을 선택합니다 :

$ Scope.cars = {
car01 : {브랜드 : "포드" 모델 "머스탱"색상 "빨간색"},
car02 : {브랜드 : "피아트" 모델 "500"색상 : "흰색"},
car03 : {브랜드 : "볼보" 모델 "XC90", 색상 : "블랙"}
};

»시도

키 키 - 값 쌍을 사용할 수 없습니다 직접 드롭 다운 메뉴에서 객체의 속성을 사용 :

예

<선택 NG-모델 = "selectedCar "y.brand 자동차 (x, y)에 대한 ","NG-옵션 =>
</ 선택>

»시도