單擊 angularJs 時更改圖標

Question

這是現在僅顯示一個圖標的 Html，但我想要的是，每當單擊該編輯圖標時，它都會立即更改為保存圖標。

下面是html：

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

下面是JS文件，有沒有辦法將html綁定添加到JS文件？ 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}"

演示

 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>