javascript - 如何在 AngularJS 中选择多个默认选项？

Question

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

在我的 Controller 代码中:

  $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 代码中，选择标记 ng-init 设置为第二个索引选定的Fvs:

然而，这不是我想要的。我真正想要的是 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;
  };
});

查看此Plunker