Button in table angular

Question

What I need to do is show button in table, but when "name" is "True" the button should not show. Only when "name" is "False: the button should be in the table.

My Json

[
        "name" : "False",
        "date" : "22/02/2015"
    },
    {
        "name" : "False",
        "date" : "18/03/2013"
    },
    {
        "name" : "True",
        "date" : "12/06/2012"
    }]

My table

<tr ng-repeat="name in names">
   <td>{{name.name}}</td>
   <td>{{name.date}}</td>
   <td><button ng-model="post">POST</button></td>
</tr>

score 0 · Answer 1 · answered Jan 07 '17 at 08:29

0

You could use ng-if to show and hide button

<tr ng-repeat="name in names">
    <td>{{name.name}}</td>
    <td>{{name.date}}</td>
    <td>
        <button ng-if="name.name === 'False'">POST</button>
    </td>
</tr>

answered Jan 07 '17 at 08:29

Pankaj Parkar

134,766
23
234
299

score 0 · Answer 2 · answered Jan 07 '17 at 09:36

0

you can use ng-if or ng-show or ng-hide

<tr ng-repeat="name in names">
<td>{{name.name}}</td>
<td>{{name.date}}</td>
<td>
    <button ng-if="!name.name">POST</button>
</td>

answered Jan 07 '17 at 09:36

jitendra varshney

3,484
1
21
31

score 0 · Answer 3 · edited May 23 '17 at 12:24

Go througth this link https://stackoverflow.com/a/21870119/6554634 to get better idea about ng-if, ng-show and ng-hide.

And there is mistake in your data, there is no opening brace for first object. This is silly but causes loss if we didn't notice.

[
    {
        "name" : "False",
        "date" : "22/02/2015"
    },
    {
        "name" : "False",
        "date" : "18/03/2013"
    },
    {
        "name" : "True",
        "date" : "12/06/2012"
    }
]

I prefer ng-if as it removes element from DOM if not necessary.

<tr ng-repeat="name in names">
   <td>{{name.name}}</td>
   <td>{{name.date}}</td>
   <td><button ng-model="post" ng-if="name.name==='False'">POST</button></td>
</tr>

score 0 · Answer 4 · answered Jan 07 '17 at 10:29

Your JSON is invalid
Use ng-show to show the button when name is True.

Working demo :

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope) {
    $scope.names = [{
        "name" : "False",
        "date" : "22/02/2015"
    },
    {
        "name" : "False",
        "date" : "18/03/2013"
    },
    {
        "name" : "True",
        "date" : "12/06/2012"
    }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<table>
<tr ng-repeat="name in names">
   <td>{{name.name}}</td>
   <td>{{name.date}}</td>
   <td><button ng-model="post" ng-show="name.name == 'True'">POST</button></td>
</tr>
</table>
</div>

Button in table angular

4 Answers4