angularJs를 클릭 할 때 아이콘을 변경하려면

Question

여기에 하나의 아이콘 만 표시되는 Html이 있지만 편집 아이콘을 클릭 할 때마다 바로 아이콘을 저장하도록 변경됩니다. JS 파일에 html로 바인딩을 추가 할 수있는 방법이있다,

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

그리고 아래로 아래의 JS 파일입니다 아래

는 HTML입니까? JS 코드 :

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

Answer 1

당신은 ng-class을 사용하여 다음과 같이 클릭에 클래스를 전환 할 수 있습니다.

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>