Question

我在使用选择标记上的ng-options时遇到角度问题，其中默认选定元素应由＆＃34; company＆＃34;中的属性确定。来自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]在所有元素上设置默认元素，但我真正想要的是通过链接将所选元素设置为负责公司的任何人卖方反对公司对象。我需要一些来实现＆＃34; isSelected＆＃34;从下面的代码。

<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，没有价值而且没有＆＃34; isSelected＆＃34;

请看这个例子：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的模型是连接到seller.id的company.seller，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>

＆＃13;

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

＆＃13;

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

＆＃13;

角度ng-options对象链接到ng-repeat对象

2 个答案: