Show Hide Button based on condition using AngularJS in ASP.Net MVC

Last Reply one year ago By dharmendr

Posted one year ago


I have one table with releavnt fiedls

Id   EId    UAR_Add   UAR_Edit    UAR_Delete

1      1           1             0                 1

if UAR_Add=1 then display add button on screen or else no need

in the same way form UAR_Edit and UAR_delete

for me values are getting but it was changing design 

could you please help me 

    Layout = null;
<html ng-app="myApp">
    <link href="~/content/bootstrap.css" rel="stylesheet" />
    <link href="~/content/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="~/masters/font-awesome.min.css">
    <script src="~/masters/jquery-1.12.4.js"></script>
    <script src="~/masters/bootstrap.min.js"></script> 
    <script src="~/masters/dirpagination.js"></script>

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

        app.controller("myCntrl", ['$scope', '$http', 'myService', function ($scope, $http, myService) {

            ////To Get All Feature Records
            function GetAllFeatureNames() {
                var getData = myService.getfeatures();
                getData.then(function (gh) {
                    $scope.rights =;
                }, function (gh) {
                    alert("Records gathering failed!");

        app.service("myService", function ($http) {
            //get All Feature
            this.getfeatures = function () {
                return $http.get("/menuselection/getAll1");
<body ng-controller="myCntrl">
    <div class="container">
            <div ng-repeat="right in rights">
                <button class="btn btn-success btn-sm " ng-show="mahesh2" ng-if="right.UAR_Add==1">Add Country </button>              
            <hr style="width: 550px;" />
            <br />
            <div id="dvContainer">
                    <div class="table-responsive " style="overflow-x:auto;">
                        <table id="dvData" class="table table-bordered">
                            <tr dir-paginate="country in countries|orderBy:sortKey:reverse|filter:search|itemsPerPage:10" ng-model="search">
                                    <input type="hidden" ng-model="country.COI_Id" />
                                <td ng-repeat="right in rights">
                                    <a class="glyphicon glyphicon-edit" ng-if="right.UAR_Edit==1" ng-click="editCountry(country)" href=""></a>
                                    <a class="glyphicon glyphicon-trash" ng-if="right.UAR_Delete==1" ng-click="deleteCountry(country)" href=""></a>
                        <dir-pagination-controls max-size="10"


Posted one year ago

You need to add a table structure and inside tr use the ng-repeat you neeed to show hide the button inside the td.