表格的角度过滤器

Question

我有数据集（最大长度 - 8）：

[{"number":1,
"name":"name 1"
},
{"number":3,
"name":"name 3"
},
{"number":6,
"name":"name 6"
}]

我需要一个如下所示的表格：

1. 姓名 1
2. //空
3. 姓名 3
4. //空
5. //空
6. 名字 6
7. //空
8. //空

我该怎么做？

Answer 1

使用这个：https://docs.angularjs.org/api/ng/directive/ngBindHtml

示例：

    var myCtrl = function ($scope) {
      
      $scope.list = [{number:1,name:"name 1"},{number:3,name:"name 3"},{number:6,name:"name 6"}];
      $scope.fakeList = [1,2,3,4,5,6,7,8];
      
      $scope.getName = function (ind) {
        
        for (var i = 0; i < $scope.list.length; i++)
        {
          if (ind == $scope.list[i].number)
            return $scope.list[i].name;
        }
        
        return "//empty";
      }
      
      
    }

var myApp = angular.module('myApp',[]);
myApp.controller('myCtrl', ['$scope', myCtrl]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
    <ul ng-controller="myCtrl">
      <li ng-repeat="item in fakeList">
         <span ng-bind-html="getName(item)"></span>
      </li>
    </ul>
</div>

Answer 2

实际上，您可以只使用 HTML，无需控制器操作：

angular.module('demo', []).controller('DemoController', function($scope) {

  $scope.items = [{
    "number": 1,
    "name": "name 1"
  }, {
    "number": 4,
    "name": "name 4"
  }, {
    "number": 6,
    "name": "name 6"
  }]
});

table {
  width: 100px;
  border-collapse: collapse;
}
table td {
  padding: 2px 10px;
  border: 1px #DDD solid;
}
table tr.item {
  background: #EEE;
}
.panel {
  position: absolute; top: 10px; left: 120px;
}
pre.panel {left: 240px; top: 0; font-size: 11px;}

<script src="https://code.angularjs.org/1.5.5/angular.min.js"></script>

<div ng-app="demo" ng-controller="DemoController">
  <table>
    <tr ng-repeat="j in '12345678'.split('').slice(0, items[0].number - 1) track by $index">
      <td>{{ j }}</td>
      <td></td>
    </tr>
    <tr class="item" ng-repeat-start="item in items" x-binding="{{ index = $index; next = $last ? 9 : items[$index + 1].number }}">
      <td>{{ item.number }}</td>
      <td>{{ item.name }}</td>
    </tr>
    <tr ng-repeat-end ng-repeat="j in '12345678'.split('').slice(item.number, next - 1) track by $index">
      <td>{{ j }}</td>
      <td></td>
    </tr>
  </table>

  <div class="panel">
    <input type="number" ng-model="items[0].number" min="1" max="{{ items[1].number - 1 }}" />
    <input type="number" ng-model="items[1].number" min="{{ items[0].number + 1 }}" max="{{ items[2].number - 1 }}" />
    <input type="number" ng-model="items[2].number" min="{{ items[1].number + 1 }}" max="8" />
  </div>
  <pre class="panel">{{ items | json }}</pre>
</div>