javascript - 嵌套的 ng-repeat 以创建具有不同数据的多个表

标签 javascript html angularjs

我有Json数据

[{"ID": "01000", "Name" : "Name1", "Age" : 25},
 {"ID": "01001", "Name" : "Name2", "Age" : 30},
 {"ID": "01001", "Name" : "Name3", "Age" : 23}]

并希望使用 ng-repeat 在多个表中显示此数据。表格应该是这样的

How the tables should look like

我创建了将不同 ID 定位到“$scope.ID”变量中的函数。

    $scope.ID = [];
    $scope.ID.push("1");
    var s = 0;
    for (var i = 0; i < $scope.Report.length; i++){

        if ($scope.ID[s] != $scope.Report[i].Id){
            $scope.ID.push($scope.Report[i].Id);                 
            s++;
        }            
    }

然后我尝试以这种方式将数据显示到表中

    <div class="table" ng-repeat="id in ID" ng-model="query">

    <div class="row header">
      <div class="cell">
        ID
      </div>
      <div class="cell">
        NAME
      </div>
      <div class="cell">
        AGE
      </div>
    </div>

    <div class="row"  ng-repeat="r in Report | filter: query track by $index">
      <div class="cell">
        {{r.id}}
      </div>
      <div class="cell">
        {{r.name}}
      </div>
      <div class="cell">
       {{r.age}}
      </div>

    </div>
  </div>

脚本返回两个表,但是每个表都有相同的三个值,

What the tables actually look like

我需要每个生成的表都有自己的过滤值,对于这种情况,第一个表应该按 ID:01000 过滤,第二个表按 ID:01001 过滤。

我应该为此做什么?

最佳答案

尝试:

<div class="row header">
  <div class="cell">
    ID
  </div>
  <div class="cell">
    NAME
  </div>
  <div class="cell">
    AGE
  </div>
</div>


<div class="row"  ng-repeat="r in Report | filter: {id: id}">
  <div class="cell">
    {{r.id}}
  </div>
  <div class="cell">
    {{r.name}}
  </div>
  <div class="cell">
   {{r.age}}
  </div>

</div>

关于javascript - 嵌套的 ng-repeat 以创建具有不同数据的多个表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38443389/

相关文章:

html - 如何使边框与宽度匹配的 HTML 元素居中

javascript - 卡片翻转过渡在 IE 中无法正常工作

javascript - 我可以在表格中包含表格吗?我正在研究 AngularJS

javascript - Angular : custom filter infinite digest

php - 打印一个逗号和一个 html 元素

javascript - 根据页面上的位置更改 Bootstrap 导航栏链接颜色

javascript - HTML 输入字段宽度(与 JavaScript 相关)

php - 使用 Angular.js 的 HTTP POST

javascript - 如何使用 Javascript 替换 HTML 页面中出现的所有字符串

javascript - 谷歌时间轴图表到图像