AngularJS의 ng-options를 사용하여 선택 작업

 

질문 : AngularJS의 ng-options를 사용하여 선택 작업

---

다른 게시물에서 읽었지만 알아낼 수 없었습니다.

배열이 있습니다.

$scope.items = [
   {ID: '000001', Title: 'Chicago'},
   {ID: '000002', Title: 'New York'},
   {ID: '000003', Title: 'Washington'},
];

다음과 같이 렌더링하고 싶습니다.

<select>
  <option value="000001">Chicago</option>
  <option value="000002">New York</option>
  <option value="000003">Washington</option>
</select>

또한 ID = 000002 인 옵션을 선택하고 싶습니다.

나는 선택 을 읽고 시도했지만 알아낼 수 없습니다.

답변

---

한 가지주의 할 점은 ngOptions가 작동 하려면 ngModel이 필요하다는 것입니다. "$ scope.blah를 선택한 값으로 설정 ng-model="blah"

이 시도:

<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>

AngularJS의 문서에서 더 많은 것입니다 (본 적이 없다면) :

어레이 데이터 소스의 경우 :

• 배열의 값에 대한 레이블
• 배열의 값에 대한 레이블로 선택
• 배열의 값에 대한 그룹 별 레이블 그룹 = 배열의 값에 대한 그룹 별 레이블 그룹으로 선택

객체 데이터 소스의 경우 :

• 객체의 (key, value) 레이블
• 객체의 (키, 값)에 대한 레이블로 선택
• 개체의 (키, 값)에 대한 그룹 별 레이블 그룹
• 개체의 (키, 값)에 대한 그룹 별 레이블 그룹으로 선택

AngularJS의 옵션 태그 값에 대한 설명 :

ng-options 를 사용하면 ng-options에 의해 작성된 옵션 태그의 값은 항상 옵션 태그와 관련된 배열 항목의 인덱스가됩니다 . AngularJS를 사용하면 기본 유형뿐만 아니라 선택 컨트롤을 사용하여 전체 개체를 선택할 수 있기 때문입니다. 예를 들면 :

app.controller('MainCtrl', function($scope) {
   $scope.items = [
     { id: 1, name: 'foo' },
     { id: 2, name: 'bar' },
     { id: 3, name: 'blah' }
   ];
});

<div ng-controller="MainCtrl">
   <select ng-model="selectedItem" ng-options="item as item.name for item in items"></select>
   <pre>{{selectedItem | json}}</pre>
</div>

위의 방법을 사용하면 전체 개체를 $scope.selectedItem 직접 선택할 수 있습니다. 요점은 AngularJS를 사용하면 옵션 태그에 무엇이 있는지 걱정할 필요가 없다는 것입니다. AngularJS가 처리하도록합니다. 스코프에서 모델에있는 항목에만 신경을 써야합니다.

다음은 위의 동작을 보여주고 작성된 HTML을 보여주는 플 런커입니다.

기본 옵션 처리 :

기본 옵션과 관련하여 위에서 언급하지 않은 몇 가지 사항이 있습니다.

첫 번째 옵션 선택 및 빈 옵션 제거 :

ng-options 에서 반복하는 항목의 첫 번째 요소에 모델 ( ng-model ng-init 를 추가하여이를 수행 할 수 있습니다.

<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.name for item in items"></select>

참고 : foo 가 "허위"항목으로 제대로 초기화되면 약간 혼란 스러울 수 있습니다. foo 초기화를 처리하고 싶을 것입니다.

기본 옵션 사용자 지정 :

이것은 약간 다릅니다. 여기서해야 할 일은 빈 값 속성이있는 옵션 태그를 선택한 하위 항목으로 추가 한 다음 내부 텍스트를 사용자 지정하는 것입니다.

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

참고 :이 경우 "비어 있음"옵션은 다른 옵션을 선택한 후에도 그대로 유지됩니다. AngularJS에서 selects의 기본 동작은 그렇지 않습니다.

선택 후 숨겨지는 사용자 정의 기본 옵션 :

값을 선택한 후 사용자 정의 된 기본 옵션을 사라지게하려면 기본 옵션에 ng-hide 속성을 추가 할 수 있습니다.

<select ng-model="foo" ng-options="item as item.name for item in items">
   <option value="" ng-if="foo">Select something to remove me.</option>
</select>

출처 : https://stackoverflow.com/questions/13047923/working-with-select-using-angularjss-ng-options