Question

我正在实施动态表单。用户可以选择添加新表单并删除前一个表单。这是删除按钮的代码

<button type="button" ng-show="$last" class="btn btn-danger">Remove</button>

在这种情况下，如果只有一个表单，则删除按钮将显示在第一个表单上;如果有多个表单，则删除按钮将显示在最后一个表单上。

我的问题是，当只有一个表单时，如何使删除按钮消失，当有多个表单时，删除按钮将只显示到最后一个表单。

另外，我知道我可以使用ng-disable来禁用第一个按钮，但我正在寻找一种让删除按钮消失的方法。

Answer 1

您可以使用$first和$last之类的

<button type="button" ng-show="$last && !$first" class="btn btn-danger">Remove</button>

var app = angular.module('my-app', [], function() {})

app.controller('AppController', function($scope) {
  $scope.array = [{}];
})

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<div ng-app="my-app">
  <div ng-controller="AppController">
    <button ng-click="array.push({})">Add</button>
    <form ng-repeat="item in array">
      <h3>Form {{$index}}</h3>
      <button type="button" ng-show="$last && !$first" class="btn btn-danger" ng-click="array.splice(array.indexOf(item), 1)">Remove</button>
    </form>
  </div>
</div>

Answer 2

你应该使用ng-show / ng-hide来显示和隐藏按钮。使用您的控制器确定何时显示/隐藏按钮

Angular ng-repeat仅显示最后一个元素。如果只有一个元素，则不显示任何内容

2 个答案: