CODEWITHSUNDEEP
angularjs
angel
angel

Reputation: 25

show the update button when i click the edit icon and hide that same update button when i click the view icon using angularjs?

This is my HTML code. I have a form and edit, view buttons. When I click the edit icon I want to show the update button, but when I click the view button I want to hide the update button using AngularJS

<div ng-app="myapp" ng-controller="candidatecontroller">
  <div class="form-group">
    <button class="btn btn-warning" ng-click="update_data()" value="{{btnName}}">
      Update
    </button>
    <button class="btn btn-warning">
      Close
    </button>
  </div>

  <table>
    <button class="btn btn-xs btn-success" ng-click="updateData(x.id,x.candidatename, x.degree, x.percentage, x.email, x.address,x.jobtype,x.salary);">
      <i class="ace-icon fa fa-eye bigger-120"></i>
    </button>
    <button class="btn btn-xs btn-info" ng-click="updateData(x.id,x.candidatename, x.degree, x.percentage, x.email, x.address,x.jobtype,x.salary); ShowHide();">
      <i class="ace-icon fa fa-pencil bigger-120 classs"></i>
    </button>
  </table>
</div>

Upvotes: 0

Views: 975

Answers (1)

Ravikumar Rajendran
Ravikumar Rajendran

Reputation: 504

Is this you are searching for? 

<html>

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.js"></script>
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/ace-css/css/ace.min.css">
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div ng-app="myapp" ng-controller="candidatecontroller">
    <div class="form-group">
        <button class="btn btn-warning" ng-click="update_data()" ng-show="updatebtn">Update</button>
        <button class="btn btn-warning">Close</button>
    </div>
    <table>
        <button class="btn btn-xs btn-success" ng-click="updateData(x.id,x.candidatename, x.degree, x.percentage, x.email, x.address,x.jobtype,x.salary); updatebtn = false;">
            <i class="ace-icon fa fa-eye bigger-120"></i>
        </button>
        <button class="btn btn-xs btn-info" ng-click="updateData(x.id,x.candidatename, x.degree, x.percentage, x.email, x.address,x.jobtype,x.salary); updatebtn = true;">
            <i class="ace-icon fa fa-pencil bigger-120 classs"></i>
        </button>
    </table>
</div>
<script>
angular.module('myapp', []).controller('candidatecontroller', ['$scope', function($scope) {

}])
</script>

</html>

Upvotes: 1

Related Questions