CODEWITHSUNDEEP
javascriptjqueryangularjsforms
Captain Rib
Captain Rib

Reputation: 295

Angular ng-repeat show only last element. If only one element, doesn't show anything

I am implementing a dynamic form. User can select to add a new form and delete the previous one. Here is the code for delete button

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

In this case, the delete button will show on the first form if there is only one form and on the last one if there are more than one forms.

My question is, when there is only one form, how can I make the delete button disappear and when there are more than one, delete button will only display to the last form.

Also, I know I can use ng-disable to disable the first button, but I am looking for a method to make delete button disappear.

Upvotes: 1

Views: 1633

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388316

You can use $first and $last like

<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>

Upvotes: 2

Balaji V
Balaji V

Reputation: 956

you should use ng-show/ ng-hide to show and hide the button. Use your controller to determine when to show /hide the button

Upvotes: 0

Related Questions