angularJsをクリックするとアイコンを変更するには

Question

ここではただ1つのアイコンしか表示されないHtmlですが、その編集アイコンがクリックされたときはすぐにアイコンを保存するように変更されます。以下は

htmlです：、

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

そしてダウン以下は、JSファイルである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>