Question

我想只显示ng-repeat中的第一个元素，然后单击显示其余元素。

这是我尝试做的事情没有成功：

<button data-ng-click="term = !term">Show rest</button>

    <div data-ng-repeat="y in mQues track by $index" data-ng-show="term" data-ng-init="term = $first"> 
    ...
    </div>

它实际上只显示第一个但按钮点击会因某种原因而显示...

Answer 1

更改ng-show条件：data-ng-show="term || $first"

Answer 2

试试这个......

<div data-ng-repeat="item in items" data-ng-show="term || $index == 0">{{item.title}}</div>

Answer 3

＆＃13;

<div data-ng-repeat="y in mQues track by $index" data-ng-if="$first"></div>

＆＃13;

我认为这会有所帮助

Answer 4

使用角度filter limitTo，这是相当直接的。

function MyCtrl($scope) {
  $scope.items = [
    { title: "item 1" },
    { title: "item 2" },
    { title: "item 3" },
    { title: "item 4" }
  ]
  $scope.limit = 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app ng-controller="MyCtrl">
<span ng-click="limit = limit == 1 ? items.length : 1">Toggle</span>
  <ul>
    <li ng-repeat="item in items | limitTo:limit" ng-bind="item.title"></li>
  </ul>
</div>

Answer 5

https://docs.angularjs.org/api/ng/directive/ngShow

ng-show通过评估给定的表达式来显示元素。

分配给ng-show的表达式会转换为true或false，具体取决于结果是“真实”还是“虚假”。当您为term分配真值时，ng-show将被指定为true。

当您点击按钮时，它会评估term = !term和term，然后变为false，因此整个div将被隐藏

Answer 6

猜猜更简单，更直接：

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

app.controller('DisplayController', function($scope) {
  $scope.ShowRest = 0;
  $scope.items = [{
    title: 'myTitle1'
  }, {
    title: 'myTitle2'
  }, {
    title: 'myTitle3'
  }, {
    title: 'myTitle4'
  }, {
    title: 'myTitle5'
  }];
});

app.$inject = ['$scope'];

然后：

<div data-ng-controller="DisplayController">
  <div data-ng-repeat="item in items">
    <div data-ng-class="{'no-display': !$first}">{{ item.title }}</div>
  </div>
  <div data-ng-repeat="item in items" data-ng-show="ShowRest">
    <div data-ng-class="{'no-display': $first}">{{ item.title }}</div>
  </div>
  <button data- ng-click="ShowRest = !ShowRest">Show rest</button>
</div>

也许它不是最有效的方式，但它有效！小提琴：http://jsfiddle.net/cb6pggL8/1/

角重的Ng重复和Ng显示

6 个答案: