선택 옵션에 대한 값 속성을 설정하려면 어떻게 해야 합니까?

선택 옵션에 대한 값 속성을 설정하려면 어떻게 해야 합니까?

소스 JSON 데이터는 다음과 같습니다.

[
  {"name":"Alabama","code":"AL"},
  {"name":"Alaska","code":"AK"},
  {"name":"American Samoa","code":"AS"},
  ...
]

나는 노력한다

ng-options="i.code as i.name for i in regions"

하지만 얻는 것은:

<option value="?" selected="selected"></option>
<option value="0">Alabama</option>
<option value="1">Alaska</option>
<option value="2">American Samoa</option>

다음 정보를 얻을 수 있습니다.

<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AS">American Samoa</option>

그럼 어떻게 하면 가치 속성을 얻고 "?" 아이템을 없앨 수 있을까요?

덧붙여서 $scope.regions를 AJAX 요청 결과가 아닌 정적 JSON으로 설정하면 빈 항목이 사라집니다.

처음 시도한 것은 작동해야 하지만 HTML은 우리가 예상했던 것과는 다릅니다.첫 번째 "no item selected" 케이스를 처리하는 옵션을 추가했습니다.

<select ng-options="region.code as region.name for region in regions" ng-model="region">
   <option style="display:none" value="">select a region</option>
</select>
<br>selected: {{region}}

위는 다음 HTML을 생성합니다.

<select ng-options="..." ng-model="region" class="...">
   <option style="display:none" value class>select a region</option>
   <option value="0">Alabama</option>
   <option value="1">Alaska</option>
   <option value="2">American Samoa</option>
</select>

만지작거리다

Angular는 값에 숫자 정수를 사용하지만 모델($scope.region)은 필요에 따라 AL, AK 또는 AS로 설정됩니다(이 숫자 값은 목록에서 옵션을 선택할 때 Angular에서 올바른 배열 항목을 검색하기 위해 사용됩니다).

이는 Angular가 "선택" 지침을 구현하는 방법을 처음 배울 때 혼란스러울 수 있습니다.

ng-repeat으로 직접 구축하지 않으면 이 작업을 수행할 수 없습니다.

<select ng-model="foo">
   <option ng-repeat="item in items" value="{{item.code}}">{{item.name}}</option>
</select>

하지만... 그럴 가치가 없을지도 몰라설계대로의 기능을 유지하고 Angular가 내부 작업을 처리하도록 하는 것이 좋습니다.각도는 인덱스를 이러한 방식으로 사용하기 때문에 실제로 전체 객체를 값으로 사용할 수 있습니다.따라서 드롭 다운바인딩을 사용하여 문자열이 아닌 전체 값을 선택할 수 있습니다.이것은 매우 훌륭합니다.

<select ng-model="foo" ng-options="item as item.name for item in items"></select>

{{foo | json}}

를 사용하는 경우track by옵션,valueAtribute가 올바르게 기술되어 있습니다.

<div ng-init="a = [{label: 'one', value: 15}, {label: 'two', value: 20}]">
    <select ng-model="foo" ng-options="x for x in a track by x.value"/>
</div>

생산:

<select>
    <option value="" selected="selected"></option>
    <option value="15">one</option>
    <option value="20">two</option>
</select>

드롭다운에 지정된 모델이 존재하지 않는 경우 angular는 빈 옵션 요소를 생성합니다.따라서 다음과 같이 선택 항목에 모델을 명시적으로 지정해야 합니다.

<select ng-model="regions[index]" ng-options="....">

이전에 답변한 바와 같이 다음을 참조하십시오.

왜 Angular는JS는 select?에 빈 옵션을 포함하며 이 바이올린을 사용합니다.

업데이트: 대신 다음을 시도해 보십시오.

<select ng-model="regions[index].code" ng-options="i.code as i.name for i in regions">
</select>

or

<select ng-model="regions[2]" ng-options="r.name for r in regions">
</select>

선택 항목에는 빈 옵션 요소가 없습니다.

다음과 같이 모델을 수정할 수 있습니다.

$scope.options = {
    "AL" : "Alabama",
    "AK" : "Alaska",
    "AS" : "American Samoa"
  };

그 후 사용

<select ng-options="k as v for (k,v) in options"></select>

select의 "value"를 일반적인 HTML 폼 요소로 의미 있게 사용하고 ng-options를 사용하여 승인된 방법으로 Angular에 연결하는 것은 불가능할 것으로 보입니다.그 결과, 선택 항목과 함께 숨겨진 입력을 삽입하고 선택 항목과 동일한 모델을 추적해야 했습니다(간단하게 하기 위해 실제 생산 코드를 매우 단순화).

HTML:

<select ng-model="profile" ng-options="o.id as o.name for o in profiles" name="something_i_dont_care_about">
</select>
<input name="profile_id" type="text" style="margin-left:-10000px;" ng-model="profile"/>

Javascript:

App.controller('ConnectCtrl',function ConnectCtrl($scope) {
$scope.profiles = [{id:'xyz', name:'a profile'},{id:'abc', name:'another profile'}];
$scope.profile = -1;
}

로 「」를 검색했을 입니다.params[:profile_id](이것은 우연히 Rails 앱이지만, 같은 원리가 어디에나 적용됩니다.)숨겨진 입력이 셀렉트와 동일한 모델을 추적하기 때문에 자동으로 동기화됩니다(추가 Javascript 불필요).츠키노이는 부작용으로 가치 속성에 미치는 영향을 거의 보완합니다.

흥미롭게도, 이 기술은 숨겨져 있지 않은 입력 태그에서만 작동한다는 것을 알았습니다(그래서 여백 왼쪽:-100px; 페이지 밖으로 입력을 이동시키는 트릭을 사용해야 했습니다).다음 두 가지 변형은 작동하지 않았습니다.

<input name="profile_id" type="text" style="display:none;" ng-model="profile"/>

그리고.

<input name="profile_id" type="hidden" ng-model="profile"/>

뭔가 놓치고 있는 게 분명해Angular와 문제가 되기엔 너무 이상한 것 같아요.

사용할 수 있습니다.

state.name for state in states track by state.code

여기서 state는 JSON 배열 내의 각 객체의 변수 이름입니다.

도움이 되었으면 좋겠다

다음과 같이 시험해 보십시오.

var scope = $(this).scope();
alert(JSON.stringify(scope.model.options[$('#selOptions').val()].value));

언급URL : https://stackoverflow.com/questions/13803665/how-to-set-the-value-attribute-for-select-options