Question

我有基于已加载的元数据呈现的HTML。最终根据控制器中的作用域值形成数据表。

在控制器中：

$ scope.arrayOfCustomObjects = [{{entry：data1}，{entry：data2}];

元数据包含在.json文件中，格式如下（我在这里添加了两个，实际上有数百个，每个基本上都描述了一个HTML元素）：

loadedMetaData:

{
    "field_1": {
        "index": 0,
        "type": "selectbox",
        "nameId": "arrayOfCustomObjects" <-- this is the string name of a scoped variable in a controller.
      },
    "field_2": {
        "index": 1,
        "type": "textinput",
        "nameId": "textField"
     }
}

HTML看起来像这样：

<div ng-repeat="field in loadedMetaData>
    <div ng-repeat="item in field.nameId">
         <!-- build out HTML for each -->     
    </div>
</div>

当我运行它时，它不起作用（它永远不会遍历$ scope.arrayOfCustomObjects）。如果我添加一行来显示{{field.nameId}}会显示'arrayOfCustomObjects'，但我认为它只是字符串，而不是它所代表的值。

如果我将HTML更改为此，它将起作用：

<div ng-repeat="field in loadedMetaData>
    <div ng-repeat="item in arrayOfCustomObjects">
         <!-- build out HTML for each -->     
    </div>
</div>

...但是有什么方法可以保持我想要的抽象？我希望能够在元数据中定义目标数组，因此不必在HTML本身中定义特定于控制器的名称。

Answer 1

假设您的loadedMetadata如下：

[
    "arrayOfCustomObjects",
    // other 'data' object keys
]

那么您可以拥有一个这样的对象来存储您的实际数据：

data = {
    "arrayOfCustomObjects": [
        // some items
    ]
}

然后，在模板中执行以下操作：

<div ng-repeat="field in loadedMetaData>
    <div ng-repeat="item in data[field]">
         <!-- display the items in arrayOfCustomObjects -->     
    </div>
</div>

Answer 2

这将值作为字符串

var field = { "nameId": "arrayOfCustomObjects" }

将此更改为

var field = { "nameId": arrayOfCustomObjects }

Answer 3

要获得预期的结果，请使用以下代码修改代码

使用范围函数将字符串转换为范围变量
在内部ng-repeat内部渲染该变量

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.arrayOfCustomObjects = [1,2,3]
$scope.loadedMetaData = {
    "field_1": {
        "index": 0,
        "type": "selectbox",
        "nameId": "arrayOfCustomObjects" 
      },
    "field_2": {
        "index": 1,
        "type": "textinput",
        "nameId": "textField"
     }
}
 
  $scope.getVariable = function(val){
    return $scope[val]
  }
});

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl as ctrl">

 <div>
      <div ng-repeat="field in loadedMetaData">
        <div ng-repeat="item in getVariable(field.nameId)">
    {{item}}
</div>
</div>
    </div>

</div>

</body>
</html>

codepen-https://codepen.io/nagasai/pen/XGLZzX

Answer 4

使用带有this关键字的bracket notation属性访问器：

<div ng-repeat="(fieldKey, fieldValue) in loadedMetaData>
    <div ng-repeat="item in this[fieldValue.nameId]">
         <!-- build out HTML for each -->     
    </div>
</div>

从文档中：

可以使用标识符this访问上下文对象[（$ scope）]，使用标识符$locals访问本地对象。

— AngularJS Developer Guide - Expression Context

使用具有动态值的ng-repeat

4 个答案: