AngularJS使用object填充ng-options

时间:2017-08-19 19:56:20

标签: javascript angularjs

如果我使用ng-options,我将如何填充选择?

所以我有类似的东西,

<select ng-model="option.model"
ng-options="option as (option.firstVal + ' ' + option.secondVal) 
  for option in options>
<option value="">default</option>

每个选项中的值是整个对象,ng-option是通过一组对象。

我需要将值作为整个对象的值,以便我不能使用ng-repeat。当我尝试将模型分配给对象本身时,

$scope.option.model = option; //option is made elsewhere

它不起作用。它将使用默认选项填充该字段。

[编辑1] 在此示例中,应将下拉列表选择为John Rambo,而是将其设置为默认值

jsfiddle.net/brzxn8yt/1

1 个答案:

答案 0 :(得分:1)

你只需要使用ng-options的track属性。在下面的示例中,我通过ID属性跟踪对象。

注意:请在对象中使用唯一属性(例如:id是完美的,因为没有重复项,但是actor属性有重复项并且会抛出错误)。

var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function ($scope) {
    $scope.people = [
        { id: 1, first: 'John', last: 'Rambo', actor: 'Silvester' },
        { id: 2, first: 'Rocky', last: 'Balboa', actor: 'Silvester' },
        { id: 3, first: 'John', last: 'Kimble', actor: 'Arnold' },
        { id: 4, first: 'Ben', last: 'Richards', actor: 'Arnold' }
    ];
    
    $scope.selectedPerson = { id: 1, first: 'John', last: 'Rambo', actor: 'Silvester' }; // a person object
    
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
    <fieldset ng-controller="FirstCtrl">
        <select 
            ng-options="item as item.first + ' ' + item.last for item in people track by item.id"
            ng-model="selectedPerson">
              <option value="">Default</option>
            </select>
        {{ selectedPerson }}
    </fieldset>
</div>

<强>参考:

ng-options