source

ng-options 바인딩된 선택 요소에 대해 선택한 값 설정

gigabyte 2023. 3. 10. 22:04
반응형

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

반응형