Angular ng-options 对象链接到 ng-repeat 对象

Question

我在使用 angular 时遇到问题，在 select 标签上使用 ng-options，其中默认的 selected 元素应由属性中的属性确定"company" 来自 ng-repeat 元素。看这段代码：

<tr data-ng-repeat="company in companies">
   <td><input data-ng-model="company.Name" value="{{company.Name}}" /></td>
   <td>
     <select data-ng-model="selectedSeller" data-ng-options="seller.Login for seller in sellers">
     </select>
  </td>
</tr>

我可以在控制器范围内通过 $scope.selectedSeller = $scope.companies[0] 为所有元素设置默认元素，但我真正想要的是设置 select通过将卖方对象链接到公司对象，将其发送给对公司负责的人。我需要以某种方式从下面的代码中实现 "isSelected"。

<tr data-ng-repeat="company in companies">
   <td><input data-ng-model="company.Name" value="{{company.Name}}" /></td>
   <td>
     <select data-ng-model="selectedSeller" isSelected="company.responsible == seller.id" data-ng-options="seller.Login for seller in sellers">
     </select>
   </td>
</tr>

有人知道如何解决这个问题吗？

Answer 1

Angular 是数据驱动的，因此您只需指定模型，而 ng-model 会将其连接到输入。

所以你只提供 ng-model，没有值也没有 "isSelected"

看这个例子：http://jsbin.com/kiqazaxahe/edit?html,js,output

<table>
  <tr ng-repeat="company in vm.companies">
   <td><input data-ng-model="company.
     name"/></td>
   <td>
     <select data-ng-model="company.responsible" 
             data-ng-options="seller.id as seller.login for seller in vm.sellers">
     </select>
   </td>
</tr>
  </table>

  <h2>Json vm.companies</h2>
  <pre>{{vm.companies | json}}</pre>

你的数据可能是这样的：

var StackController = function() {
  this.companies = [
    {
      name: 'company 1',
      responsible : 1
    },
     {
      name: 'company 2',
      responsible : 2
    },
     {
      name: 'company 3',
    }
  ];

  this.sellers = [
    {
      login : 'pavel',
      id : 1,
    },
    {
      login : 'petr',
      id : 2,
    },
    {
      login : 'igor',
      id : 3,
    }
  ];
};

angular.module('stackApp', [])
  .controller('StackController', StackController);

select的模型是company.seller，连接到seller.id，ng-options的语法可以确定什么是标识符，什么是标签。

seller.id as seller.login for seller in vm.sellers

还有一点要补充，标识符不仅可以是 id，还可以是整个对象。

Answer 2

使用过滤器作为：

<select data-ng-model="selectedSeller" data-ng-options="seller.Login for seller in sellers" ng-init="selectedSeller = $filter('filter')($scope.company, {responsible: seller.id})[0]">
     </select>

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

app.controller('StackController', function($scope) {
    $scope.companies = [
        {
            name: 'company 1',
            responsible : 1
        },
        {
            name: 'company 2',
            responsible : 2
        },
        {
            name: 'company 3',
        }
    ];
    
    $scope.sellers = [
        {
            login : 'pavel',
            id : 1,
        },
        {
            login : 'petr',
            id : 2,
        },
        {
            login : 'igor',
            id : 3,
        }
    ];
}).filter("filterSeller", function() {
 return function(sellers, company) {
        var seller = {};
   
  angular.forEach(sellers, function(item, j) {
            if(company.responsible == item.id){
                seller = item;
                return false;
            }
        });
     
        return seller.id;
 };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<table ng-app="stackApp" ng-controller="StackController">
    <tr ng-repeat="company in companies">
        <td><input ng-model="company.name"/></td>
        <td>
            <select ng-model="company.responsibleSelected" ng-options="seller.id as seller.login for seller in sellers" 
            ng-init="company.responsibleSelected = (sellers | filterSeller:company)">
            </select>
        </td>
      <td>{{company.responsibleSelected}}</td>
    </tr>
</table>

Angular ng-options 对象链接到 ng-repeat 对象

Angular ng-options object linked to ng-repeat object

angularjs

angularjs-ng-repeat

angularjs-ng-options