如何使用ng-repeat从阵列中的数组列表中仅获取第一个数据

时间:2018-05-18 09:16:41

标签: angularjs

是否可以将ng-repeat与数组一起使用?

以下是我的观点:

<div ng-repeat="item in items">
  <p>{{item}}</p>
  <ul>
    <li ng-repeat="i in items">{{i}}</li>
  </ul>
</div>

这是我的控制器:

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
  ]
});

我想使用ng-repeat打印仅1,4,7是否可能?

5 个答案:

答案 0 :(得分:2)

尝试这种方法:

<li ng-repeat="i in items">{{i[0]}}</li>

如果您想要第二列,可以将i [0]更改为i [1],依此类推..

答案 1 :(得分:0)

你不需要在那里进行ng-repeat,你可以这样做

项[0]。

<强>样本

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [
      [1, 2, 3],
      [4, 5, 6],
      [7, 8, 9]
    ]
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="plunker" ng-controller="MainCtrl">
<div ng-repeat="item in items">
  
    <li>{{item[0]}}</li>

</div>

答案 2 :(得分:0)

以下是您要找的内容

<li ng-repeat="item in items">{{item[0]}}</li>

答案 3 :(得分:0)

这将有效:

<table ng-controller="myCtrl" border="1">
<tr ng-repeat="x in records">
  <td>{{x[0]}}</td>  
</tr>
</table>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
  ]
});
</script>

</body>
</html>

答案 4 :(得分:-1)

尝试以下

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.items = {"Projects":[{"ProjectName":"SmarTest","ProjectDescription":"abc","ModuleDetails":[{"Maintitle":"Getting Started with IoT1"},{"Maintitle ":"Getting Started with IoT2 "}]},{"ProjectName":"SmarTest","ProjectDescription":"abc","ModuleDetails":[{"Maintitle":"Getting Started with IoT3"},{"Maintitle ":"Getting Started with IoT4 "}]}]};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="plunker" ng-controller="MainCtrl">
  <ul>
    <li ng-repeat="project in items.Projects">{{project.ModuleDetails[0].Maintitle}}</li>
  </ul>
</body>

进行调整 - plunker