Как пройти данные модели в AngularJS?

Question

У меня есть выпадающий с поддержкой JSON, как это:

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

Это выпадающий, используя select2модель является идентификатором выбранного торгового стиля:

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

Рядом с ним я хочу разместить текстовое поле, в котором отображается название выбранного торгового стиля и его можно редактировать.

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

Как изменить модель последнего, указав имя выбранного торгового стиля, а не идентификатор? Другими словами, как мне пройти объект области видимости, чтобы указать на одноименное имя выбранного значения идентификатора?

Answer 1

Если я правильно понял ваш вопрос, вам нужно использовать ng-options для привязки к объекту, а не к полю. Так становится

 <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

<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>

JavaScript:

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);
       },
    }
});

Это может удовлетворить проблемы, которые вы подняли в своем комментарии. Он использует tradestyle.id вместо $index в <option>s, что означает, что выбранный элемент работает в случаях, когда к коллекции применяется фильтр. Дополнительный $parser гарантирует, что tradestyle.id фактически станет выбранным элементом tradestyle перед его применением к свойству модели currentTradestyle.

Существует зависимость от Underscore, но вы можете удалить ее с помощью более длинной альтернативы методу findWhere().

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

Answer 3

Я считаю, что вы ищете что-то вроде этого:

<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>

Рабочая скрипка: