[angularjs] 간단한 배열 초기화를 가진 ng-options

Program / 글쓴이

Angular 및와 약간 혼동됩니다 ng-options.

간단한 배열이 있고 선택을 초기화하고 싶습니다. 그러나 그 옵션 값 = 레이블을 원합니다.

script.js

$scope.options = ['var1', 'var2', 'var3'];

html

<select ng-model="myselect" ng-options="o for o in options"></select>

내가 얻는 것 :

<option value="0">var1</option>
<option value="1">var2</option>
<option value="2">var3</option>

내가 원하는 것 :

<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>

그래서 나는 시도했다 :

<select ng-model="myselect2" ng-init=0 ng-options="options[k] as v for (k,v) in options"></select>

<select ng-model="myselect3" ng-init=0 ng-options="b as b for b in options"></select>

(그러나 작동하지 않았습니다.)

편집하다:

내 양식이 외부에서 제출되므로 0 대신 값으로 ‘var1’이 필요합니다.

답변

당신은 실제로 세 번째 시도에서 맞았습니다.

 <select ng-model="myselect" ng-options="o as o for o in options"></select>

실제 예제를 참조하십시오 :
http://plnkr.co/edit/xEERH2zDQ5mPXt9qCl6k?p=preview

비결은 AngularJS가 키를 0에서 n까지의 숫자로 쓰고 모델을 업데이트 할 때 다시 변환한다는 것입니다.

결과적으로 HTML은 올바르지 않게 보이지만 값을 선택할 때 모델이 여전히 올바르게 설정됩니다. (즉, AngularJS는 ‘0’을 ‘var1’로 다시 변환합니다)

Epokk의 솔루션도 작동하지만 데이터를 비동기식으로로드하는 경우 항상 올바르게 업데이트되지 않을 수 있습니다. 범위가 변경되면 ngOptions를 사용하면 올바르게 새로 고쳐집니다.

답변

다음 ng-repeat과 option같이 사용할 수 있습니다 .

<form>
    <select ng-model="yourSelect"
        ng-options="option as option for option in ['var1', 'var2', 'var3']"
        ng-init="yourSelect='var1'"></select>
    <input type="hidden" name="yourSelect" value="{{yourSelect}}" />
</form>

제출하면 form입력 값을 숨길 수 있습니다.

DEMO

선택된
ng- 반복

답변

당신은 같은 것을 사용할 수 있습니다

<select ng-model="myselect">
    <option ng-repeat="o in options" ng-selected="{{o==myselect}}" value="{{o}}">
        {{o}}
    </option>
</select>

ng-selected를 사용하면 myselect가 미리 채워진 경우 옵션을 미리 선택합니다.

ng-options는 배열에서만 작동하기 때문에 어쨌든 ng-options 보다이 방법을 선호합니다. ng-repeat는 json 같은 객체에서도 작동합니다.

답변

다음과 같이 선택하십시오 : 

<select ng-model="myselect" ng-options="b for b in options track by b"></select>

당신은 얻을 것이다 :

<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>

일 바이올린 : http://jsfiddle.net/x8kCZ/15/

답변

<select ng-model="option" ng-options="o for o in options">

$ scope.option은 변경 후 ‘var1’과 같으며 생성 된 HTML에 value = “0”이 표시됩니다.

플 런커

답변