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");
}
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.