반응형
ng-options 바인딩된 선택 요소에 대해 선택한 값 설정
관련 코드를 만지작거립니다.http://jsfiddle.net/gFCzV/7/
ng-repeat에서 참조되는 객체의 하위 컬렉션에 바인딩된 드롭다운의 선택된 값을 설정하려고 합니다.선택한 옵션은 내가 알고 있는 어떤 방법으로도 바인딩되어 있는 컬렉션을 참조할 수 없기 때문에 어떻게 설정해야 할지 모르겠습니다.
HTML:
<div ng-app="myApp" ng-controller="SomeController">
<div ng-repeat="Person in People">
<div class="listheader">{{Person.firstName}} {{Person.lastName}}</div>
<div class="listitem" ng-repeat="Choice in Person.Choices">
{{Choice.Name}}:
<select
ng-model="Choice.SelectedOption"
ng-options="choice.Name for choice in Choice.Options"></select>
{{Choice.SelectedOption.ID}}
</div>
</div>
</div>
JS:
var myApp = angular.module('myApp', []);
myApp.controller("SomeController", function($scope) {
$scope.People = [{
"firstName": "John",
"lastName": "Doe",
"Choices": [
{
"Name":"Dinner",
"Options":[{Name:"Fish",ID:1}, {Name:"Chicken",ID:2}, {Name:"Beef",ID:3}],
"SelectedOption":{Name:"Chicken",ID:2} //this doesn't work
},
{
"Name":"Lunch",
"Options":[{Name:"Macaroni",ID:1}, {Name:"PB&J",ID:2}, {Name:"Fish",ID:3}],
"SelectedOption":""
}
],
}, {
"firstName": "Jane",
"lastName": "Doe"
}];
});
이것이 실제로 Selected와 함께 ng-init를 사용해야 하는 유일한 경우입니까?모델에 대한 색인?
AngularJS 1.2를 사용하는 경우 '추적 기준'을 사용하여 Angular에게 객체 비교 방법을 알려줄 수 있습니다.
<select
ng-model="Choice.SelectedOption"
ng-options="choice.Name for choice in Choice.Options track by choice.ID">
</select>
바이올린 http://jsfiddle.net/gFCzV/34/ 업데이트
를 사용할 수 있습니다.ID
필드를 등식 식별자로 지정합니다.이 경우 adhoc 개체를 사용할 수 없습니다. Angular가JS는 객체를 비교할 때 참조가 동일한지 여부를 확인합니다.
<select
ng-model="Choice.SelectedOption.ID"
ng-options="choice.ID as choice.Name for choice in Choice.Options">
</select>
선택한 값에 대해 ng-selected를 사용합니다.Angular에서 코드를 성공적으로 구현했습니다.JS v1.3.2
<select ng-model="objBillingAddress.StateId" >
<option data-ng-repeat="c in States" value="{{c.StateId}}" ng-selected="objBillingAddress.BillingStateId==c.StateId">{{c.StateName}}</option>
</select>
언급URL : https://stackoverflow.com/questions/20845210/setting-selected-values-for-ng-options-bound-select-elements
반응형
'source' 카테고리의 다른 글
ngRepeat에서 선택한 행을 강조 표시하는 방법 (0) | 2023.03.15 |
---|---|
jQuery의 .append()를 통해 DOM 요소(각도 지시어)를 추가하는 방법 (0) | 2023.03.10 |
Wordpress에서 액션 우선순위를 변경하려면 어떻게 해야 합니까? (0) | 2023.03.10 |
로컬 스토리지에 객체 어레이를 저장하는 방법 (0) | 2023.03.10 |
React-Native에서 실패한 propType on Image 구성 요소 (0) | 2023.03.10 |