如何在AngularJS中使用多个默认选择选项？

Question

我想在AngularJs中有多个默认选择的选项。

在我的控制器代码中：

  $scope.selectedFvs = ['fvid9', 'fvid2'];

  $scope.fields = [{
    id: 'fid1',
    name: 'f name 1',
    fieldValues: [{
      id: 'fvid1',
      name: 'fv name 1',
    }, {
      id: 'fvid2',
      name: 'fv name 2'
    }]
  }, {
    id: 'fid2',
    name: 'f name 2',
    fieldValues: [{
      id: 'fvid3',
      name: 'fv name 3',
    }, {
      id: 'fvid4',
      name: 'fv name 4'
    }, {
      id: 'fvid5',
      name: 'fv name 5',
    }, {
      id: 'fvid6',
      name: 'fv name 6'
    }]
  }, {
    id: 'fid3',
    name: 'f name 3',
    fieldValues: [{
      id: 'fvid7',
      name: 'fv name 7',
    }, {
      id: 'fvid8',
      name: 'fv name 8'
    }, {
      id: 'fvid9',
      name: 'fv name 9',
    }]
  }];

在HTML代码中：

  <div ng-repeat="field in fields">
    <label>{{::field.name}}</label>
    <select ng-init="fields[field.id] = selectedFvs[1]" ng-model="fields[field.id]">
      <option value="select-all">Select All</option>
      <option ng-repeat="fieldValue in field.fieldValues" value="{{::fieldValue.id}}">{{fieldValue.name}}</option>
    </select>
  </div>

这将使用“ fv name 5”作为默认的选定字段值进行渲染，因为在HTML代码中，将select标记ng-init设置为selectedFvs的第二个索引：

但是，这不是我想要的。 我真正想要的是3个选择的默认值为selectedFvs 。 如果可以的话看起来像这样

这是此代码的Plunker链接。

Answer 1

使用$ index如下

<div ng-repeat="field in fields">
    <label>{{::field.name}}</label>
    <select ng-init="fields[field.id] = (selectedFvs|findselected: field.fieldValues)" ng-model="fields[field.id]">
      <option value="select-all">Select All</option>
      <option ng-repeat="fieldValue in field.fieldValues" value="{{::fieldValue.id}}">{{fieldValue.name}}</option>
    </select>
  </div>

也是这个过滤器

app.filter("findselected", function() { // register new filter

  return function(inputs, fields) { // filter arguments
    var selected = '';
    angular.forEach(inputs, function(val1){
         angular.forEach(fields, function(val2){
           if(val1 === val2.id){
             selected = val1;
           }
         })
    });
    return selected;
  };
});

看到这个柱塞

Answer 2

使用selectedFvs[$index]代替selectedFvs[1]