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

Last Reply 2 months ago By dharmendr

Posted 2 months ago

Hi,

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">
<head>
    <title></title>
    <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>
    <script>

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

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

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

        }]);
        app.service("myService", function ($http) {
            //get All Feature
            this.getfeatures = function () {
                debugger;
                return $http.get("/menuselection/getAll1");
            };
        });
            </script>
</head>
<body ng-controller="myCntrl">
    <div class="container">
        <div>          
            <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>              
            </div>
            <hr style="width: 550px;" />
            <br />
            <div id="dvContainer">
                <div>
                    <div class="table-responsive " style="overflow-x:auto;">
                        <table id="dvData" class="table table-bordered">
                            <tr>
                                <th><b>Name</b></th>
                                <th><b>Actions</b></th>
                            </tr>
                            <tr dir-paginate="country in countries|orderBy:sortKey:reverse|filter:search|itemsPerPage:10" ng-model="search">
                                <td>
                                    <input type="hidden" ng-model="country.COI_Id" />
                                    {{country.COI_Name}}
                                </td>                          
                                <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>
                                </td>
                            </tr>
                        </table>
                        <dir-pagination-controls max-size="10"
                                                 direction-links="true"
                                                 boundary-links="true">
                        </dir-pagination-controls>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

 

This question does not have replies that have been liked.