angularjs-迭代出第一项和其他项

最新推荐文章于 2020-06-24 09:04:43 发布

Mars-xq

最新推荐文章于 2020-06-24 09:04:43 发布

阅读量617

点赞数

分类专栏： angularjs angularjs

本文链接：https://blog.csdn.net/sinat_31057219/article/details/60781276

版权

angularjs 同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

angularjs

37 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="x in records" ng-if="$index>0">
    <div> {{x}}</div>
</div>

<p>我是华丽的分割线ng-if="$index>0"</p>

<div ng-repeat="x in records" ng-if="$first">
    <div> {{x}}</div>
</div>

<p>我是华丽的分割线ng-if="$first"</p>

<div ng-repeat="x in records" ng-if="!$first">
    <div> {{x}}</div>
</div>

<p>我是华丽的分割线ng-if="!$first"</p>

<div ng-repeat="x in records" ng-show="notFirst($index)">
    <div> {{x}}</div>
</div>

<p>我是华丽的分割线ng-show="notFirst($index)"</p>


<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {

  $scope.notFirst = function (index) {
     return index != 0;
   };

  $scope.records = [
    "菜鸟教程1",
    "菜鸟教程2",
    "菜鸟教程3",
    "菜鸟教程4",
  ]
});
</script>

</body>
</html>