在 ng-repeat 中将 ng-options 绑定到 JSON 对象中的嵌套数组

Question

这是我的第一个问题，请多多关照！希望能帮到你。

我正在尝试使用 ng-repeat 在我的 HTML 视图中定义一个 select 框（下拉列表），以便我可以为数组中的每个项目创建一个 select .我已经成功实现了这一点，但是当我尝试将我需要的选项放入每个 select 时，我的问题就来了。

我使用的数组{ "field1": 1, "field2": "Value01", "field3": "Value02", "refFields": [ { "fieldId": 100, "fieldValue": "fieldValueA" }, { "fieldId": 101, "fieldValue": "fieldValueB" } ] }, etc...

我需要数组 'top level' 中每个项目的 select，并且在每个 select 框中，应该出现的值应该是 refFields 嵌套数组中的 fieldValue。

我当前的（损坏的）代码产生了一些非常垃圾的结果。这是代码：

<div ng-repeat="fk in fks">
        <ng-form name="fksForm">
            <select name="fkselect" ng-model="fk" ng-options="item as item.refFields for item in fks">                
            </select>
        </ng-form>
    </div>

谁能告诉我这是否可行？我不认为扁平化数据是这个特定应用程序的一个选项。我已经尝试了很多不同的事情，包括将索引传递给 ng-options，正如您可能预料的那样，这会产生一些非常不可靠的结果。我也试过这个，它没有给我任何有用的输出。

ng-options="item as item.refFields.fieldValue for item in fks"

这是我的 JSFiddle：ng-option nested JSON Array within ng-repeat

非常感谢您提出任何建议！

Answer 1

使用 Underscore.js 您可以为 ng-options 准备数据。

对我来说，它看起来很复杂。我会重新考虑是否可以修改数据结构。我不能推荐一个结构，因为我不明白最终的结果会是什么样子。

我创建了两个数组，一个包含用于 ng-repeat 的字段名称，第二个数组包含用于选项的 refFields。

使用 $index 可以获取 ng-repeat 的当前索引以访问 refFields.

我不确定我是否正确创建了这个，因为我不知道你在用 field1、field2、field3 值做什么。

请查看此 jsfiddle 或下面的演示（相同代码）。

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

myApp.controller('DetailsCtrl', ['$scope', function($scope) {
    var data = [
  {
    "field1": 1,
    "field2": "Value01",
    "field3": "Value02",
    "refFields": [
      {
        "fieldId": 100,
        "fieldValue": "fieldValueA"
      },
      {
        "fieldId": 101,
        "fieldValue": "fieldValueB"
      }
    ]
  },
  {
    "field1": 2,
    "field2": "Value03",
    "field3": "Value04",
    "refFields": [
      {
        "fieldId": 102,
        "fieldValue": "fieldValueA"
      },
      {
        "fieldId": 103,
        "fieldValue": "fieldValueB"
      },
      {
        "fieldId": 104,
        "fieldValue": "fieldValueC"
      },
      {
        "fieldId": 105,
        "fieldValue": "fieldValueD"
      }
    ]
  },
  {
    "field1": 3,
    "field2": "Value05",
    "field3": "Value06",
    "refFields": [
      {
        "fieldId": 106,
        "fieldValue": "fieldValueA"
      },
      {
        "fieldId": 107,
        "fieldValue": "fieldValueB"
      }
    ]
  }
];
    $scope.fks = _.map(data, function(field) {
        return _.omit(field, ['field1', 'field2', 'field3']).refFields; // only refFields
    });
    console.log($scope.fks);
    $scope.fields = _.map(data, 
    function(field) {
        console.log(field);
        return [field.field1, field.field2, field.field3];
    }
    );
    //console.log(results)
    $scope.dropdown = {};
    
    $scope.changedValue = function(index) {
        console.log(index, $scope.dropdown);
        console.log($scope.dropdown[index]);
    }
}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="DetailsCtrl">
<form novalidate class="form-vertical" ng-show="!loading" name="detailsForm" ng-controller="DetailsCtrl">
    <!--<pre>{{fks |json}}</pre>-->
      <div ng-repeat="fk in fields">
          <ng-form name="fksForm">
              <label>{{fk}}</label>
                <select name="fkselect" ng-model="dropdown[$index]" ng-options="item.fieldValue for item in fks[$index]" ng-change="changedValue($index)">
                </select>
            </ng-form>
        </div>  
</form>
</div>

Answer 2

你的数据很好，还有一个更简单的方法：利用 fk 并直接从中获取 refFields，所以 ng-options="item as item.fieldValue for item in fk.refFields"。

完整代码：

<div ng-app="myApp" ng-controller="myCtrl">
    <div ng-repeat="fk in fks">
        <label>{{fk.field2}}</label>
        <select ng-model="fk.selectedItem" ng-options="item as item.fieldValue for item in fk.refFields">              
        </select>      
    </div>  
</div>

以及您可以直接引用的数据：

angular.module('myApp',[])
.controller('myCtrl',function($scope,$timeout) {
    $scope.fks = [
      {
        "field1": 1,
        "field2": "Value01",
        "field3": "Value02",
        "refFields": [
          { "fieldId": 100,  "fieldValue": "1fieldValueA" },
          { "fieldId": 101, "fieldValue": "1fieldValueB" }
        ]
      },
      {
        "field1": 2,
        "field2": "Value03",
        "field3": "Value04",
        "refFields": [
          { "fieldId": 102, "fieldValue": "2fieldValueA" },
          { "fieldId": 103, "fieldValue": "2fieldValueB" },
          { "fieldId": 104, "fieldValue": "2fieldValueC" },
          { "fieldId": 105, "fieldValue": "2fieldValueD" }
        ]
      },
      {
        "field1": 3,
        "field2": "Value05",
        "field3": "Value06",
        "refFields": [
          { "fieldId": 106, "fieldValue": "3fieldValueA" },
          { "fieldId": 107, "fieldValue": "3fieldValueB" }
        ]
      }
    ];
});

当然还有 the fiddle。

现在不要问我如何初始化此类列表中特定项目的 select：这正是我在这里寻找的。

在 ng-repeat 中将 ng-options 绑定到 JSON 对象中的嵌套数组

Bind ng-options to nested array within JSON object, within ng-repeat

json

angularjs

angularjs-ng-repeat

ng-repeat

ng-options