Hide a button in onload using angularjs

Question

I have one form with three buttons edit update and cancel.Onload of the page I need to hide the update button.
When I click edit button edit should be hide and update should be displayed. when I click on update I need to redirect some other page.
Hoe to do this?

                <form id="show_details">

                        <label>Project Name</label>
                        <label><input type="text"></label>

                        <label>Client </label>
                        <label><input type="text"></label>

                        <label>Project Co-ordinator</label>
                        <label><input type="text" disabled="true" ></label>

                        <label>Client Co-ordinator</label>
                        <label><input type="text"></label>

                        <label>Resource</label>
                        <label><input type="text" disabled="true"></label>
                    </div>
                </form>
                <div class="row">
                    <span class="pull-right btnMarginTop">
                        <button class="btn btn-primary" id="projectDetailsEdit"  ng-click="goEvent()">Edit</button>
                        <button class="btn btn-primary" id="projectDetailsUpdate" ng-hide="editMode=true" ng-click="goEvent()">Update</button>
                        <button class="btn btn-default" onclick="window.location.href = '/Project/ProjectList'">Cancel</button>
                    </span>
                </div>

<script>
    var app = angular
                    .module("intranet_App", [])
                    .controller(function ($scope, $http) {
                       $scope.editMode = false;
                       $scope.goEvent = function(){
                       $scope.editMode = !$scope.editMode;
                       if($scope.editMode){  
                          $scope.editMode = false;
                       }else{
                           $scope.editMode = true;
                       }      
                    }
                    })
</script>

Saurabh Agrawal · Accepted Answer · 2017-06-09 06:19:42Z

3

Try this using ng-show

  <button ng-show="editMode" class="btn btn-primary" id="projectDetailsEdit"  ng-click="goEvent()">Edit</button>
  <button ng-show="!editMode" class="btn btn-primary" id="projectDetailsUpdate" ng-click="goEvent()">Update</button>

answered Jun 9, 2017 at 6:19

Saurabh Agrawal

7,7553 gold badges31 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Burak Akyıldız · Accepted Answer · 2017-06-09 06:22:44Z

You have problem in html code and changing editMode in goEvent function twice. Here is working code

var app = angular.module("intranetApp", [])
                    .controller('ctrl',function ($scope, $http) {
                       $scope.editMode = false;
                       $scope.goEvent = function(){
                       $scope.editMode = !$scope.editMode;
                           
                    }
                    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="intranetApp" ng-controller="ctrl">
<form id="show_details" >

                        <label>Project Name</label>
                        <label><input type="text"></label>

                        <label>Client </label>
                        <label><input type="text"></label>

                        <label>Project Co-ordinator</label>
                        <label><input type="text" disabled="true" ></label>

                        <label>Client Co-ordinator</label>
                        <label><input type="text"></label>

                        <label>Resource</label>
                        <label><input type="text" disabled="true"></label>
                
                
                <div class="row">
                    <span class="pull-right btnMarginTop">
                        <button class="btn btn-primary" id="projectDetailsEdit"  ng-show="editMode == false" ng-click="goEvent()">Edit</button>
                        <button class="btn btn-primary" id="projectDetailsUpdate" ng-show="editMode" ng-click="goEvent()">Update</button>
                        <button class="btn btn-default" onclick="window.location.href = '/Project/ProjectList'">Cancel</button>
                    </span>
                </div>
                </form>
                </div>

Manikandan Velayutham · Accepted Answer · 2017-06-09 06:24:03Z

Use ng-show/hide or ng-if..

var app = angular.module("intranet_App", []);
     app.controller('ctrl', function ($scope, $http) {
                       $scope.editMode = false;
                       $scope.goEvent = function(){
                       $scope.editMode = !$scope.editMode;                            
                    }
                    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="intranet_App" ng-controller="ctrl">
   <form id="show_details">
   <div>
                        <label>Project Name</label>
                        <label><input type="text"></label>

                        <label>Client </label>
                        <label><input type="text"></label>

                        <label>Project Co-ordinator</label>
                        <label><input type="text" disabled="true" ></label>

                        <label>Client Co-ordinator</label>
                        <label><input type="text"></label>

                        <label>Resource</label>
                        <label><input type="text" disabled="true"></label>
                    </div>
                </form>
                <div class="row">
                    <span class="pull-right btnMarginTop">
      <button class="btn btn-primary" id="projectDetailsEdit" ng-if="!editMode"  ng-click="goEvent()">Edit</button>
                        <button class="btn btn-primary" id="projectDetailsUpdate" ng-if="editMode" ng-click="goEvent()">Update</button>
                        <button class="btn btn-default" onclick="window.location.href = '/Project/ProjectList'">Cancel</button>
                    </span>
                </div>
</body>

Keshav · Accepted Answer · 2017-06-09 06:25:40Z

1

Use ng-show and pass an event to click function :

create a scope variable with initial value false
        $scope.editMode =false;

             $scope.goEvent = function(event){
        if(event=='edit'){
        $scope.editMode = true;
        }else if(event=='update'){
        $scope.editMode = false;
        }
     }

    <button class="btn btn-primary" id="projectDetailsEdit"  ng-show="!editMode" ng-click="goEvent('edit')">Edit</button>
<button class="btn btn-primary" id="projectDetailsUpdate" ng-show="editMode" ng-click="goEvent('update')">Update</button>

answered Jun 9, 2017 at 6:25

Keshav

8312 gold badges12 silver badges34 bronze badges

Collectives™ on Stack Overflow

Hide a button in onload using angularjs

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Collectives™ on Stack Overflow

Hide a button in onload using angularjs

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related