Question

我正在使用网格，我想用数组填充数据。

我有一系列列，行和数据

$scope.columns = [
  { id: "1", name: "Col 1" },
  { id: "2", name: "Col 2" },
  { id: "3", name: "Col 3" },
  { id: "4", name: "Col 4" }
];

$scope.rows = [
  { id: "1", name: "Row 1" },
  { id: "2", name: "Row 2" },
  { id: "3", name: "Row 3" },
  { id: "4", name: "row 4" }
];

$scope.data = [
  { idRow: "1", idCol: "1", value: "Jhon" },
  { idRow: "1", idCol: "2", value: "Peter" },
  { idRow: "2", idCol: "1", value: "Mary" },
  { idRow: "3", idCol: "2", value: "Paul" }
];

我想填充网格，我在视图中使用此代码进行（不太好）。

这是因为我无法在View中使用data和idRow过滤idCol数组。

此代码有效，但它根本不好。您将与我分享哪些改进？

<table>
  <thead>
    <tr>
      <th>Description</th>
      <th ng-repeat="he in columns">{{he.name}}</th>
    </tr>
  </thead>
  <tbody>
    <tr class="pointer" ng-repeat="fi in rows">
      <td>{{fi.name}}</td>
      <td ng-repeat="co in columns">
        <label ng-repeat="es in data" ng-if="es.idRow == fi.id && es.idCol == co.id">
          {{es.vale}}   
        </label>
      </td>
    </tr>
  </tbody>
</table>

顺便说一下：什么方法可以消除数组中的重复项（有些像是不同的）并从视图中排序？

正如你所看到的，我是Angularjs的新手。

谢谢，CapitánS。

Answer 1

它的'fi.id'不是'fi.ID或co.ID'

     <table>
      <thead>
        <tr>
          <th>Description</th>
          <th ng-repeat="he in columns track by $index">{{he.name}}</th>
        </tr>
      </thead>
      <tbody>
        <tr class="pointer" ng-repeat="fi in rows track by $index">
          <td>{{fi.name}}</td>
          <td ng-repeat="co in columns track by $index" >
            <label ng-repeat="d in data track by $index" ng-if="d.idRow == fi.id && d.idCol == co.id">
              {{d.value}}
            </label>
          </td>           
        </tr>
      </tbody>
    </table>

关于重复项，可能会在控制器中过滤您的数组。您可以使用array.filter

 var arr = [1, 1, 4, 4, 5, 5]
 var newA = arr.filter(function(elem, index, self) {
    return index == self.indexOf(elem);
  })

newA是[1,4,5]

从View中以Angular过滤数组

1 个答案: