Angular Js，每次值递增时隐藏一个按钮

Question

正如您在屏幕截图中看到的那样，每次递增索引时按钮都会递增。

我想知道的是，每次索引增加时，前面的数字将不再有按钮。

例如，在屏幕截图 1 和 2 中，每个按钮都是“在下方插入问题”按钮。按钮应该只出现在当前最高的数字上，截图上的按钮应该只出现在数字2上。

javascript

  me.create_question_object = function (index) {
  }

html

<div class="col-md-12 yq-default-pad  top50 text-center">
   <div class="text-center">
      {$ $index + 1 $}.)
      <button  ng-hide ng-click="main.create_question_object($index)" class="btn btn-success">
         <i class="fas fa-plus-circle"></i> Insert Question Below</button>
   </div>
</div>

截图如下：https://imgur.com/a/cyLhIN5

Answer 1

我猜你有一个 ng-repeat 问题，因此你有某种数组来保存问题。

如果是这样，您可以在最后一个问题上显示 ng-if="$index === myArray.length-1" 按钮。

$index 是一个特殊的范围变量，angular 添加到 ng-repeate 指令的范围。

angular.module('myModule', [])
  .controller('ctrl', function($scope) {
    $scope.questions = [1, 2, 3, 4];
  })


angular.bootstrap(document.getElementById('root'), ['myModule']);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div id="root">
  <ul ng-controller="ctrl">
    <li ng-repeat="item in questions">
      {{item}}
      <button ng-if="$index === questions.length-1">&times;</button>
    </li>
  </ul>
</div>

Angular Js，每次值递增时隐藏一个按钮

Angular Js , Hide a button everytime a value increments

javascript

increment

button

angularjs