AngularJS에서 모델 데이터를 어떻게 트래버스합니까?

Question

은이 같은 백킹 JSON와 드롭 가지고 그것

<select id="tradestyle" ui-select2 ng-model="currentTradestyle" > 
    <option ng-repeat="tradestyle in tradestyles" value="{{tradestyle.id}}"> 
     {{tradestyle.name}} 
    </option> 
</select> 

다음 I는 :

$scope.tradestyles = [ 
    {"id":"1","source":"Source One","name":"Name One"}, 
    {"id":"2","source":"Source Two","name":"Name Two"} 
] 

이것은 select2 사용 드롭이다 모델 선택된 tradestyle의 ID는 선택한 트랙 스타일의 이름이 표시된 텍스트 필드를 배치하고 을 편집 할 수 있습니다.

<input type="text" ng-model="currentTradestyle" /> 

ID 대신 선택한 tradestyle의 이름을 가리 키도록 후자 모델을 어떻게 변경합니까? 즉, 선택한 ID 값의 형제 이름 값을 가리 키도록 범위 객체를 탐색하려면 어떻게해야합니까?

Answer 1

질문을 올바르게 이해했다면 필드가 아닌 개체에 바인딩하는 데 ng-options을 사용해야합니다.

<div ng-app="myApp"> 
    <div ng-controller='Ctrl'> 
     <select id="tradestyle" ui-select2 ng-model="currentTsIndex"> 
      <option ng-repeat="tradestyle in tradestyles" value="{{$index}}">{{tradestyle.name}}</option> 
     </select> 
     <input type="text" ng-model="tradestyles[currentTsIndex].name" /> 
    </div> 
</div> 

작업 fiddle :이 같은 그래서

<select id="tradestyle" ui-select2 ng-model="currentTradestyle" ng-options="style.name for style in tradestyles"> 

     </select> 
<input type="text" ng-model="currentTradestyle.id" /> 
<input type="text" ng-model="currentTradestyle.name" /> 

난 당신이 찾고있는 무슨 생각 http://jsfiddle.net/cmyworld/UsfF6/

Answer 2

여기 내 바이올린을보기가됩니다

Answer 3

<div ng-app="myApp"> 
    <div ng-controller='Ctrl'> 
     <select id="tradestyle" ng-model="currentTradestyle" update-model="tradestyles"> 
      <option ng-repeat="style in tradestyles" value="{{style.id}}">{{style.name}}</option> 
     </select> 
     <input type="text" ng-model="currentTradestyle.name" /> 
    </div> 
</div> 

자바 스크립트 :

var app = angular.module('myApp', []); 

app.controller('Ctrl', ['$scope', '$rootScope', function ($scope, $rootScope) { 
    $scope.tradestyles = [{ 
     "id": "1", 
     "source": "Source One", 
     "name": "Name One" 
    }, { 
     "id": "2", 
     "source": "Source Two", 
     "name": "Name Two" 
    }]; 
}]); 


app.directive('updateModel', function() { 
    return { 
     require: '?ngModel', 
     restrict: 'A', 
     link: function(scope, element, attrs, modelCtrl) { 
      function parser(value) { 
       if(value) { 
        return _.findWhere(scope[attrs.updateModel], {id: value}); 
       } 
      } 
      modelCtrl.$parsers.push(parser); 
     }, 
    } 
}); 

귀하의 의견에 제기 된 문제를 해결할 수 있습니다. <option>에서 $ index 대신 tradestyle.id를 사용합니다. 이는 필터가 컬렉션에 적용되는 경우 선택한 항목이 작동 함을 의미합니다. $ 파서를 추가하면 tradestyle.id가 currentTradestyle 모델 속성에 적용되기 전에 실제로 선택된 tradestyle 항목이됩니다.

위 아래에 의존성을 나타내지 만, findWhere() 메소드 대신에 더 긴 손으로 대체 할 수 있습니다.

http://jsfiddle.net/asperry1/Zfecq/6/