개체 배열로 select를 사용하여 AngularJS에서 모델에 값을 설정하는 방법

Question

저는 AngularJS에 익숙하지 않고 가장 좋은 방법으로 한 가지 문제를 해결하려고합니다.

나는 서버에서 제공되는 목록을 가지고 있으며 select 태그의 소스 인 내 응용 프로그램에 option을 사용하고 있습니다.

[ 
    { id: 1, name: 'Mark Twain' }, 
    { id: 2, name: 'Jack London' }, 
    { id: 3, name: 'Ernest Hemingway' } 
] 

은 또한 I의 출처와 서버에 저장 책 모델을 가지고 : 그것은 다음과 같습니다 저자의 목록이 있다고 가정하자. 도서 속성 중 하나는 author이며 사용자가 select 드롭 다운 목록에서 선택할 수 있습니다. 모델을 저장하거나 서버에서 가져 오면 author 필드가 정수로 표시됩니다. 여기 모델은 서버에 저장되는 방법 책의 예이며 때 가져온 모양을 :

{ 
    id: 324, 
    title: 'Martin Eden', 
    author: 2 
} 

책는 각도의 $resource 내 응용 프로그램에서 나는 책 모델 I을 저장하려면 이렇게 할 때마다로 표현 단지 저장 방법이라고 부르세요.

이런 내가 ng-options 지시어로 select를 사용하려고 노력이 논리를 구현하려면 :

<select ng-options="author as author.name for author in authors track by author.id" ng-model="bookModel.author"></select> 

그러나이 방법의 문제는 내가 드롭 저자을 선택할 때 author 속성의 값을 설정 아래이다 { id: 2, name: 'Jack London' }으로 변경해야하지만 저자의 ID가 필요합니다.

여기 내 문제를 설명하는 Fiddle입니다. 드롭 다운에서 다른 값을 선택하십시오. 드롭 다운 아래에 업데이트 된 값 bookModel.author이 표시됩니다. 개체의 ID 정수가되어야합니다. 그래서 언제든지 Jack London을 선택하면 bookModel.author이 이 아니라 2이되어야합니다. 그렇지 않으면 모델을 서버에서 가져오고 저장하기 전에 데이터를 조작해야합니다. 나는 더 좋은 방법이있을 수 있다고 생각합니다. 어쩌면 ng-options 지시어로 달성 할 수있는 것이 있을까요? 내가 시도

은이 방법을 수행

<select ng-model="bookModel.author"> 
    <option ng-repeat="author in authors" value="{{author.id}}">{{author.name}}</option> 
</select> 

그것은 조금 더 가까이 있지만이 방법을 bookModel.author의 값은 문자열이 아닌 정수가됩니다.

또한 책 $ resource에 대해 transformRequest 및 transformResponse 함수를 설정하여 데이터를 적절한 형식으로 변환 할 수 있음을 알고 있습니다. 하지만 더 좋은 방법이 있을까요?

도움을 주셔서 감사합니다.

Answer 1

당신은 너무처럼 ng-options에 author.id as author.name을 사용해야합니다

<div ng-app="app"> 
    <div ng-controller="testController"> 
    <select ng-options="author.name as author.name for author in authors track by author.id" ng-model="bookModel.author"></select> 
    <pre>{{bookModel.author | json}}</pre> 
    </div> 
</div> 

UPDATE 1

이 fiddle

업데이트 : 당신은 저자의 이름을 원하는 경우,

<div ng-app="app"> 
    <div ng-controller="testController"> 
    <select ng-options="author.id as author.name for author in authors track by author.id" ng-model="bookModel.author"></select> 
    <pre>{{bookModel.author | json}}</pre> 
    </div> 
</div> 

또는