如何讓jQuery點擊事件處理角js

Question

我有一些jQuery的經驗。所以，我可以編寫基本的jQuery代碼。最近，我正在學習角色js。我遵循了一些教程和他們的示例代碼。

現在，我喜歡用角度來練習一些基本的東西，我可以用jQuery輕鬆編寫。但是，我不明白我是如何輕鬆地使用angular或者初學者來編寫這些代碼的，如果我找不到用angular編寫代碼的方法，我怎麼才能讓jQuery代碼直接在角度內工作？因爲，這是我第一個關於角度的問題，我是角度初學者，可能會錯誤地寫出問題標題或描述。對不起，如果發生了。但是，看到我的小提琴後，你會清楚我的困惑。

Here is a working fiddle其中我成功地寫了jQuery。並且this is the fiddle我已經申請了angular.js並尋求幫助使這項工作成爲學習目的。提前致謝。

最後搗鼓一些示例代碼：

HTML：

<span class="glyphicon glyphicon-remove delete-item pull-right" aria-hidden="true" ng-click="deleteItem"></span> 

JS：

$scope.deleteItem = function() { 
    $(this).parents('.item').remove(); 
    }; 

Answer 1

Angulars結合使得它，所以你不必做的事情一樣操作DOM直接（即直接刪除div）。

在您的示例中，您最好從$scope.phones陣列中刪除手機。

而且，你在做ng-click="deleteItem"，則需要將其聲明爲deleteItem()

你deleteItem功能可能是這樣的：

$scope.deleteItem = function(phone) { 
    var index = $scope.phones.indexOf(phone); 
    $scope.phones.splice(index, 1); 
} 

然後你會：

<span class="glyphicon glyphicon-remove delete-item pull-right" aria-hidden="true" ng-click="deleteItem(phone)"></span> 

對於隱藏，它將是類似的，如：

<button type="button" class="btn btn-link toggle-details pull-right" style="padding: 0 12px;" ng-click="toggleDes(phone)" ng-switch="phone.hidden || false"> 
    <span ng-switch-when="true">Show</span> 
    <span ng-switch-when="false">Hide</span> 
</button> 

$scope.toggleDes = function(phone) { 
    phone.hidden = !phone.hidden; 
}; 

，你可以改變與ng-switch

文本查看更新後的jsFiddle

Answer 2

去除可沒有一個事件處理程序來完成：

<span class="glyphicon glyphicon-remove delete-item pull-right" aria-hidden="true" ng-click="phones.splice($index, 1)"></span> 

和的slideToggle可以使用一個屬性來完成電話和ng-show，ng-hide或ng-if（再次沒有事件處理程序）。

<div ng-controller="ItemCtrl"> 
    <div ng-repeat="phone in phones" class="panel panel-default item"> 
     <div class="panel-heading clearfix"> 
     <span class="glyphicon glyphicon-remove delete-item pull-right" aria-hidden="true" ng-click="phones.splice($index, 1)"></span> 
     <button type="button" class="btn btn-link toggle-details pull-right" style="padding: 0 12px;" ng-click="phone.hide = !phone.hide">{{phone.hide ? 'Show' : 'Hide'}}</button> 
     <h3 class="panel-title">{{phone.name}}</h3> 
     </div> 
     <div class="panel-body" ng-hide="phone.hide"> 
      <p>{{phone.snippet}}</p> 
     </div> 
    </div> 
    </div> 

http://jsfiddle.net/fx5pLfet/4/