如何让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/