Question

这是我的第一个问题，所以请温柔地对待我！我希望你能提供帮助。

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

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

我需要在顶级＆＃39;中选择每件商品。对于数组，在每个选择框中，应该出现的值应该是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" }
        ]
      }
    ];
});

您可以直接参考的数据：

$('button').click(function() {
  $('li.hide:lt(4)').removeClass('hide');
});

当然还有the fiddle。

现在，请不要问我如何初始化此类列表中特定项目的选择：这就是我在这里寻找的内容。

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

2 个答案: