使用 AngularJS 过滤 JSON 数据并使用智能表通过 ng-repeat 登记答案

【问题标题】：Filter JSON Data using AngularJS and enlist with ng-repeat using smart tables使用 AngularJS 过滤 JSON 数据并使用智能表通过 ng-repeat 登记
【发布时间】：2016-02-22 22:59:45
【问题描述】：

这是我的 JSON 数据。

"ATTRIBS":{

          "WWW":
            {
              HIGH:10,
              LOW:1,
              NAME:World Wide Web, 
              TYPE:ON
            },
          "NET":
            {
              HIGH:12,
              LOW:1,
              NAME: Local Net,
              TYPE:OFF
            }
          }

我想在表中列出这个 JSON 数据（我正在使用智能表），我只想列出 TYPE:OFF 的数据。

我尝试在 ng-repeat 中使用过滤器，但没有填充数据。

这是我用于在表格中列出的代码：

    <tr ng-repeat="(key, value) in offAttribs">

        <td>{{value.NAME}}</td>
        <td>{{value.key}}</td> //I want abbreviations here i.e, www,NET..etc 
        <td>{{value.TYPE}}</td>
        <td>{{value.LOW}}</td>
        <td>{{value.HIGH}}</td>

这是我的控制器的外观，它从其他服务加载 JSON 数据。

当我在控制器中使用 if 条件在 ng-repeat 中使用 offAttribs 时，它只是将键作为（索引号 0,1,2...）而不是（JSON 的键，即 WWW 或 NET....） ,

编辑......工作代码

    $scope.offAttribs = [];
    for (var key  in attribData){
          attribData[key]['ABRV'] = key;
            if (attribData[key].TYPE == 'OFF' ) {
                $scope.offAttribs.push(attribData[key]);
        }
    }

【问题讨论】：

在 ng-repeat 上方添加 div 时会出现什么？<div ng-bind="attribData"></div>
您是否尝试过过滤控制器中的数据并将其传递给ng-repeat？如果你把所有的逻辑都放在模板中，结果可能会有点混乱。
ng-repeat="(key, value) in attribData | filter: {TYPE: "OFF"}" 你试过这个吗？
@MayK 是的，我已经用单引号 'OFF' 尝试过这个，但没有出现任何表格，而“OFF”在我的 webstorm IDE 中抛出“表达式预期”错误

标签： javascript json angularjs

【解决方案1】：

我不认为offAttribs 具有您期望的数据结构。 Angular 的 (key, value) in offAttribs 语法只有在 offAttribs 是一个对象时才有效。在您的代码示例中，offAttribs 是一个数组。

如果你想访问像 WWW 或 NET 这样的键，你需要 offAttribs 成为一个对象：

$scope.offAttribs = {};

for (var key  in attribData){
    if (attribData[key].TYPE == 'OFF' ) {
        $scope.offAttribs[key] = attribData[key];
    }
}

TLDR;数组的键是它的索引。这就是为什么你得到 0,1,2 而不是 WWW、NET 等

【讨论】：

是的！它迭代所有'OFF'值并在表中创建空字段（HIGH，LOW NAME，TYPE....没有值），而我还有一个，列出所有字段。
这能回答你的问题吗？
不，这给了我所有值 {NAME TYPE LOW HIGH} 但我还希望在另一个表字段中以缩写形式出现“WWW”“NET”，因为对象保存在 $scope.offattribs... . 其将标签名称设置为 0,1,2,3....
添加了属性数据[key]['ABRV'] = key;我得到了我想要的。我不确定它是否是好的做法。