如何用角度一一显示元素答案

【问题标题】：How to display of the elements one by one with angular如何用角度一一显示元素
【发布时间】：2015-10-30 07:32:14
【问题描述】：

我想知道在单击按钮时如何处理 Angular 以一次显示一个元素。默认情况下隐藏项目，当不再有元素时隐藏按钮。

第一步

div one ----> 始终显示

div 两个 ----> 隐藏

div 三个---->隐藏

按钮 ---> 点击

第二步

div one ----> 始终显示

div 两个 ----> 可见

div 三个---->隐藏

按钮 ---> 点击

第三步

div one ----> 始终显示

div 两个 ----> 可见

div 三个----> 可见

按钮 ---> 点击-->隐藏

这是我的例子：http://plnkr.co/edit/PKx3pqrSwvyzhprBN8jI 但是第一次点击出现两个隐藏项的例子

<body ng-controller="MainCtrl">
  <div><input type="text" placeholder="first input"></div>
  <div ng-show="state.show"><input type="text" placeholder="second input"></div>
  <div ng-show="state.show"><input type="text" placeholder="third input"></div>
  <button ng-click="state.show=!state.show">Add input</button>
</body>

提前感谢您提供的所有可以帮助我的答案

【问题讨论】：

标签： angularjs

【解决方案1】：

你可以通过维护一个计数器来做到这一点：

$scope.show = 0;
$scope.incrementState = function () {
  $scope.show++;
}

然后在 HTML 中：

<div ng-show="show >= 1"><input type="text" placeholder="second input"></div>
<div ng-show="show >= 2"><input type="text" placeholder="third input"></div>

如果您只需要两个输入，这可能最适合您的需要，但如果您希望输入的数量灵活，您可以使用ng-repeat

<body ng-controller="MainCtrl as main">
  <div ng-repeat="input in main.inputs track by $index">
    <input type="text" placeholder="first input">
  </div>

  <button ng-click="main.inputs.push('another')">Add input</button>

在控制器中：this.inputs = ["first"]

【讨论】：

感谢@Explosion Pills 的回复。