Javascript Ng重复并以角度显示Ng

我只想显示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>

显示rest
...

它实际上只显示第一个按钮，但由于某种原因，按钮单击“做笔记…”

---

更改ng show条件：

数据ng show=“term | |$first”

更改ng show条件：

数据ng show=“term | |$first”
使用角度，它相当直接


函数MyCtrl（$scope）{
$scope.items=[
{标题：“项目1”}，
{标题：“项目2”}，
{标题：“项目3”}，
{标题：“项目4”}
]
$scope.limit=1；
}

切换



使用角度，它相当直截了当


函数MyCtrl（$scope）{
$scope.items=[
{标题：“项目1”}，
{标题：“项目2”}，
{标题：“项目3”}，
{标题：“项目4”}
]
$scope.limit=1；
}

切换




ng show
通过计算给定的表达式来显示元素

根据结果是“truthy”还是“falsy”，分配给
ng show
的表达式将转换为
true
或
false
。当您指定一个真实值时，
ng show
被指定为真

当您点击按钮时，它会计算
term=！term
和
term
随后变为
false
，因此整个
div
将被隐藏

ng show
通过计算给定的表达式来显示元素

根据结果是“truthy”还是“falsy”，分配给
ng show
的表达式将转换为
true
或
false
。当您指定一个真实值时，
ng show
被指定为真

当您点击按钮时，它会计算
term=！term
和
term
随后变为
false
，因此整个
div
将被隐藏
试试这个

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

{{item.title}
试试这个

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

{{item.title}
猜测更简单、更直接：

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>


{{item.title}
{{item.title}
休息

也许这不是最有效的方法，但它确实有效！
小提琴：
猜测更简单、更直接：

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>


{{item.title}
{{item.title}
休息

也许这不是最有效的方法，但它确实有效！
Fiddle:
为什么我应该选择限制？我不能使用它，因为ng repeat是嵌套的，所以我不能在一个控制器变量中使用。我不确定嵌套
ng repeat
会如何影响此解决方案，你能提供更多的代码/上下文吗？为什么我更喜欢这个限制？我不能使用它，因为ng repeat是嵌套的，所以我不能在一个控制器变量中使用。我不确定嵌套
ng repeat
对这个解决方案有何影响，你能提供更多的代码/上下文吗？@user11001，请尝试
$first
而不是
$index==1
，因为索引从
0
@user11001开始，请尝试
$first
而不是
$index==1
，因为索引从
0
开始