僅突出顯示一個圖像

Question

我有一堆圖像顯示，我想編輯某個圖像的細節。

我想通過突出顯示來選擇圖像，然後單擊edit按鈕。

它已經工作，但我想知道，當我第一次點擊圖像時，它不會被突出顯示，但第二次，它會。 這裏是我的代碼：

mainApp.controller('employeeController', ['$scope', '$http', function($scope, $http) { 
    $http.get(BASE_URL+'Employee/getAllEmployees').success(function(response) { 
         $scope.employees = response 

    }); 
    $scope.setActive=function(empID){ 
     $('img').click(function(){ 
      $('.selected').removeClass('selected'); 
      $(this).toggleClass('selected'); 
      $('#edit_eq').prop('disabled',false) 

     }); 

    } 
}]); 

這裏的HTML部分：

<button id="edit_eq" type="button" 
     class="btn btn-default" disabled><i class="fa fa-edit"></i> Edit Employee 
    </button> 
<div ng-controller="EmployeeController" class="row placeholders"> 
    <div class="col-xs-6 col-sm-3 placeholder" ng-repeat="emp in employees | filter: name"> 
     <img src="<?php echo base_url();?>{{emp.image}}" style="height:150px;width:150px" ng-click="setActive(this)"> 
     <h4><a href="#viewEmp" data-toggle="modal">{{emp.lname}}, {{emp.fname}} {{emp.mname}}</a></h4> 
     <span class="text-muted">{{emp.position}}</span> 
    </div> 

</div> 

Answer 1

你發揮setActive是有約束力的新的clickevent在每一次點擊你做的<img />。通過這種方式，它只會在第二次點擊時起作用，因爲它第一次再次綁定<img />。基本上這不是你想要完成的正確方法，因爲你真正需要的唯一綁定是標記（ng-click="setActive(this)"）中的一個。

實際上，ng-click已經綁定<img />和它執行的function，您只需指定您希望它執行的操作，而不是一次又一次地綁定它。

做這樣的事情，而不是：

 $scope.setActive = function(empID) { //this get execute when <img /> gets clicked 
     $('.selected').removeClass('selected'); 
     $(this).toggleClass('selected'); 
     $('#edit_eq').prop('disabled',false) 
    };