从值数组中以角度设置所选选项

Question

我有一组来自服务的元素，但是无法设置选择选项。 代码是这样的..

“模型”：

{
 buses : [{
          name: 'example1',
          seats: '32',
          license: '1234',
          type : {
             name: 'type1'
          }
          },{
          name: 'example2',
          seats: '31',
          license: '123',
          type : {
             name: 'type2'
          }
          },{
          name: 'example3',
          seats: '33',
          license: '1235',
          type : {
             name: 'type3'
          }
          }]
}

控制者

Dealer.getAll().then(function (dealers) {
    $scope.allDealers = dealers.data;
});

视图：

<tr ng-repeat="busT in dealer.buses track by $index">
                <td>{{busT.name}}</td>
                <td>
                    <select ng-options="bt.name for bt in busTypes" ng-model="dealer.buses[$index].type.name" >
                    </select>
                </td>
                <td>{{busT.seats}}</td>
                <td>{{busT.license}}</td>
            </tr>

select应该使用来自ajax调用的内容进行设置，因为模板是每一行的表，所以我希望在select选项中设置总线类型，因为该信息位于buses[position].type.name ，因此我正在遍历tr ，ng-options正在加载并正确显示，但是ng.model指向我的dealer.buses没有反映那里的内容。

这是一个有问题的小提琴

Answer 1

<table ng-controller="MyCtrl">
   <tr ng-repeat="busT in busList track by $index">
      <td>{{busT.name}}</td>
      <td>
          <select ng-model="busList[$index].type.name">
             <option ng-repeat="bt in busTypes track by $index" ng-value="bt.name">{{bt.name}}</option>
          </select>
      </td>
      <td>{{busT.seats}}</td>
      <td>{{busT.license}}</td>
   </tr>
</table>

问题是您试图将对象与字符串进行比较，这将始终失败。

该模型 -

busList[$index].type.name 

是一个字符串，而每个选项的值是busType数组的条目，每个数组都是一个对象，即：

{ 
  id: 1,
  type: 'type1'
}

您可能编写了一个过滤器，以便ng-options仍然可以工作，但是您也可以像我上面所做的那样使用ng-value和ng-repeat。

这是工作中的小提琴 。

Answer 2

尚未完全清楚的问题。 我只能猜测您必须替换：

ng-model="dealer.buses[$index].type.name"

与：

ng-model="busT.type.name"

但是，只有在定义了type （甚至为空，但已定义）的对象的情况下，它才起作用。

Answer 3

您必须像以下示例一样使用“ track by”：

<div ng-controller="ExampleController">
  <form name="myForm">
    <label for="mySelect">Make a choice:</label>
    <select name="mySelect" id="mySelect"
      ng-options="option.name for option in data.availableOptions track by option.id"
      ng-model="data.selectedOption"></select>
  </form>
  <hr>
  <tt>option = {{data.selectedOption}}</tt><br/>
</div>

因此，您必须替换： ng-options =“ bt.name for busTypes中的bt”
其中： ng-options =“ bt.name for busTypes中的bt按bt.name跟踪”