CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
kritika verma
kritika verma

Reputation: 47

To change the icon upon click with angularJs

Here is the Html displaying only one icon now, but what I want is that whenever that edit icon is being clicked it changes to save icon immediately.

Below is the html:

<td style="padding:5px!important;">
                            <i class="fa fa-edit" ng-click="updateEmp()">
                      </td>

And down below is the JS file, is there any way to add the html bind to the JS File? JS Code: 

$scope.updateEmp =  function (){
            $scope.isReadonly = false;
            console.log("update Employee");
        }

Upvotes: 1

Views: 782

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222522

You can use ng-class and toggle the class on click as follows.

ng-class="{'fa fa-save' : toggle, 'fa fa-edit' : !toggle}"

DEMO 

var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope){
$scope.updateEmp =  function (){
    $scope.toggle = !$scope.toggle;
 }     
 });
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <h1 style="padding:5px!important;">
          <i  ng-class="{'fa fa-save' : toggle, 'fa fa-edit' : !toggle}" ng-click="updateEmp()"></i>
   </h1>
</div>

Upvotes: 1

Related Questions