如何使jQuery单击事件在角度js上工作

I have some experienced with jQuery. So, I can write basic jQuery code. Recently, I'm learning angular js. I've followed some tutorial and their sample code.

我有一些经验丰富的jQuery。所以，我可以编写基本的jQuery代码。最近，我正在学习角度js。我已经按照一些教程和他们的示例代码。

Now, I like to practice some basic thing with angular which I could write easily with jQuery. But, I don't understand how easily I can write those with angular or as a very beginner, If i can't find an way to write those with angular, how can I make the jQuery code working directly inside angular? As, it's my first question about angular here and I'm beginner with angular, it could be some mistake to write the question title or description clearly. Sorry for that if that happened. But, after seeing my fiddles you'll be clear about my confusion.

现在，我喜欢用angular来练习一些基本的东西，我可以用jQuery轻松编写。但是，我不明白我是多么容易用角度或者作为初学者来编写那些，如果我找不到用角度来编写那些的方法，我怎样才能使jQuery代码直接在角度内工作？因为，这是我关于角度的第一个问题，我是角度的初学者，写清楚问题标题或描述可能有些错误。对不起，如果发生这种情况。但是，在看到我的小提琴后，你会清楚我的困惑。

Here is a working fiddle where I wrote the jQuery successfully. And this is the fiddle where I have applied angular.js and seeking help to make this work for learning purpose. Thanks in advance.

这是一个工作小提琴，我成功编写了jQuery。这是我应用angular.js并寻求帮助以实现学习目的的小提琴。提前致谢。

Some sample code of last fiddle:

一些最后小提琴的示例代码：

HTML:

HTML：

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

JS:

JS：

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

2 个解决方案

#1

Angulars binding makes it so you don't have to do things like manipulate the DOM directly (i.e., remove the div directly).

Angulars绑定使得您无需直接操作DOM（即直接删除div）。

In your example, you'd be better off removing the phone from the $scope.phones array.

在您的示例中，您最好从$ scope.phones数组中删除手机。

Also, you're doing ng-click="deleteItem", you need to declare it as deleteItem()

另外，你正在做ng-click =“deleteItem”，你需要将它声明为deleteItem（）

Your deleteItem function might look like this:

您的deleteItem函数可能如下所示：

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

And then you'd:

然后你会：

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

For hiding, it would be similar, like:

对于隐藏，它将是类似的，如：

<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;
 };

And you can change the text with an ng-switch

您可以使用ng-switch更改文本

See updated jsFiddle

查看更新的jsFiddle

#2

Removal can be done without an event handler:

删除可以在没有事件处理程序的情况下完成：

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

and the slideToggle could be done using a property on the phone and ng-show, ng-hide, or ng-if (again, without an event handler).

并且可以使用手机上的属性和ng-show，ng-hide或ng-if（再次，没有事件处理程序）来完成slideToggle。

  <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/

#1