$ scope 변수를 배열 인덱스로 사용

Question

배열이 'players'이고 각 플레이어의 이름, 점수 및 기타 속성이 있습니다.

<select ng-model="personToAsk"> 
    <option value=''>Select who you want to ask</option> 
    <option ng-repeat="p in players" value="{{$index}}">{{p.name}} ({{p.score}} points)</option> 
</select> 
<p>Selected player: {{selectedPerson.name}} 

그리고 내 컨트롤러 :

나는 내 부분에 다음이

$scope.selectedPerson = $scope.players[$scope.personToAsk]; 

그러나 {{selectedPerson.name}} 아무것도 출력되지 않습니다.

내 선수 배열의 색인을 하드 코드하면 ($scope.selectedPerson = $scope.players[0];) 사람을 출력하지만 어떻게 동적으로 되나요? 플레이어가 드롭 다운에서 선택되면 이름이 아래로 만 표시됩니다.

내 템플릿에 {{personToAsk}}을 입력하면 숫자가 출력됩니다.

Answer 1

모두 엉망으로 보입니다. 예를 들어 어떤 변수 '인덱스'가 무엇인지 모르겠다.

선택 항목의 옵션을 생성하려면 ngOptions를 사용해야합니다.

당신이 컨트롤러에이 있다고 가정 해 봅시다 :보기에 그런

$scope.personToAsk = {};  
$scope.players = [ 
    { id: 1, name: 'John', score: 10}, 
    { id: 2, name: 'George', score: 15}, 
    { id: 3, name: 'James', score: 4} 
]; 

, 그냥 쓰기 :

<select ng-model="personToAsk" 
    ng-options="p as (p.name + ' ' + p.score) for p in players"> 
</select> 
<p>Selected player: {{personToAsk.name}}</p> 

jsfiddle 예 : http://jsfiddle.net/JoeSham/HB7LU/9008/

Answer 2

문 :

$scope.selectedPerson = $scope.players[$scope.personToAsk]; 

초기화 할 때 한 번 실행됩니다. 그리고 그 당시에는 $ scope.personToAsk에 아무런 가치가 없습니다.

따라서이 문은 선택 드롭 다운의 값이 변경 될 때 실행되어야합니다. "personToAsk"에서 시계를 만들거나 select에서 변경을 할 수 있습니다. 그리고이 문장을 거기에서 실행하십시오. 작동합니다 :)

시계 예 :

는

$scope.$watch('personToAsk'), function() { 
    $scope.selectedPerson = $scope.players[$scope.personToAsk] ; 
} 

NG 변화 예 : 컨트롤러에서

<select ng-model="personToAsk" ng-change="selectPerson()"> <option value=''>Select who you want to ask</option> <option ng-repeat="p in players" value="{{$index}}"> {{p.name}} ({{p.score}} points) </option> </select>

는 :

$scope.selectPerson = fucntion() { 
    $scope.selectedPerson = $scope.players[$scope.personToAsk]; 
} 

는 모두 작동합니다 :)

개인적으로 ng-options 지시어를 사용하여 옵션을 렌더링하는 것을 선호합니다.