0

我有一个带有支持 JSON 的下拉列表，如下所示：

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

这是下拉列表，使用select2，模型是所选贸易风格的 ID：

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

如何将后者的模型更改为指向所选贸易风格的名称而不是 ID？换句话说，如何遍历作用域对象指向所选ID值的兄弟名称值？

4

3 回答 3

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

这可能会满足您在评论中提出的问题。它在 s 中使用 tradestyle.id 而不是 $index，<option>这意味着所选项目在将过滤器应用于集合的情况下有效。附加的 $parser 确保 tradestyle.id 在应用于 currentTradestyle 模型属性之前实际上成为选定的贸易风格项目。

存在对 Underscore 的依赖，但您可以使用 findWhere() 方法的更长时间的替代方法来删除它。

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

于 2014-02-28T17:34:55.013 回答
2

如果我正确理解了您的问题，您需要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/

于 2014-02-28T13:55:23.867 回答
1

我相信你正在寻找的是这样的：

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

工作小提琴：

于 2014-02-28T15:12:02.560 回答