单击angularJs时更改图标

时间:2017-10-26 07:30:30

标签: javascript jquery html angularjs

这里的Html现在只显示一个图标,但我想要的是,无论何时点击该编辑图标,它都会立即更改为保存图标。

下面是html:

Request.Url.Scheme + System.Uri.SchemeDelimiter + Request.Url.Host

下面是JS文件,有没有办法将html绑定添加到JS文件? JS代码:

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

1 个答案:

答案 0 :(得分:1)

您可以使用 ng-class 并在点击时切换课程,如下所示。

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

<强>样本

&#13;
&#13;
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope){
$scope.updateEmp =  function (){
    $scope.toggle = !$scope.toggle;
 }     
 });
&#13;
<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>
&#13;
&#13;
&#13;