Question

我想知道如何处理角度以便在单击按钮时一次显示元素。这些项目默认是隐藏的，当不再有元素时，按钮被隐藏。

第一步

div one ----＆gt;总是显示

div two ----＆gt;隐藏

div three ----＆gt;隐藏

按钮---＆gt; 点击

第二步

div one ----＆gt;总是显示

div two ----＆gt;的可见

div three ----＆gt;隐藏

按钮---＆gt; 点击

第三步

div one ----＆gt;总是显示

div two ----＆gt;的可见

div three ----＆gt;的可见

按钮---＆gt; 点击 - ＆GT;隐匿

这是我的例子：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>

提前感谢您提供的有助于我的所有答案

1 个答案:

答案 0 :(得分：2)

Answer 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"]

如何用角度逐个显示元素

1 个答案: