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

我对jQuery有一些经验。因此，我可以编写基本的jQuery代码。最近，我在学习angular js。我已经学习了一些教程和它们的示例代码

现在，我喜欢用angular练习一些基本的东西，我可以用jQuery轻松地编写这些东西。但是，我不明白用angular编写这些代码有多么容易，或者作为一个初学者，如果我找不到一种方法来编写angular代码，我怎么能让jQuery代码直接在angular内部工作呢？这是我第一个关于angular的问题，我是angular的初学者，写清楚问题的标题或描述可能会有些错误。如果那样的话，我很抱歉。但是，看过我的小提琴后，你就会明白我的困惑了

在这里我成功地编写了jQuery。我在那里应用了

angular.js

，并寻求帮助，以使这项工作达到学习目的。提前谢谢

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

HTML:

---

Angulars绑定使得您不必直接操作DOM（即直接删除

div

）

在您的示例中，最好将手机从

$scope.phones

阵列中删除

另外，如果您正在执行

ng click=“deleteeItem”

，则需要将其声明为

deleteeItem（）

您的

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

显示
隐藏
$scope.toggleDes=功能（电话）{
phone.hidden=！phone.hidden；
};

您可以使用

ng开关更改文本

请参阅更新的
Angulars绑定使其成为一个对象，这样您就不必直接操作DOM（即直接删除
div
）

在您的示例中，最好将手机从
$scope.phones
阵列中删除

另外，如果您正在执行
ng click=“deleteeItem”
，则需要将其声明为
deleteeItem（）

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


显示
隐藏
$scope.toggleDes=功能（电话）{
phone.hidden=！phone.hidden；
};

您可以使用
ng开关更改文本

请参阅更新的
删除操作可以在没有事件处理程序的情况下完成：

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



滑动切换可以使用手机上的属性和ng show、ng hide或ng if（同样，没有事件处理程序）来完成


{{phone.hide？'Show'：'hide'}
{{phone.name}
{{phone.snippet}


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

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



滑动切换可以使用手机上的属性和ng show、ng hide或ng if（同样，没有事件处理程序）来完成


{{phone.hide？'Show'：'hide'}
{{phone.name}
{{phone.snippet}


您的代码示例应该直接包含在您的问题中。
$（此）
可能不是您认为的那样。不要在控制器中直接与dom交互，而是在指令中进行交互。这就是说，您应该用存储在scope和ng show上的简单标志替换slidetoggle。remove应该只是从数组中删除该项，视图将自动更新以反映它。在指令中，如何定义函数将在单个元素上工作，而不是在jQuery中由$（this）定义的每个元素上工作？我的意思是，那么函数是什么？指令默认情况下会这样做，请使用
元素
参数。您的代码示例应该直接包含在您的问题中。
$（此）
可能不是您所认为的。不要在控制器中直接与dom交互，而是在指令中进行交互。这就是说，您应该用存储在scope和ng show上的简单标志替换slidetoggle。remove应该只是从数组中删除该项，视图将自动更新以反映它。在指令中，如何定义函数将在单个元素上工作，而不是在jQuery中由$（this）定义的每个元素上工作？我的意思是，该函数是什么？该指令默认情况下会这样做，使用
elem
param。好的，我知道应该如何删除某些内容，但是，关于切换函数，我有一个函数，用于在切换时将文本从“Show”更改为“Hide”或相反。如何在角度格式中做到这一点？好的，我知道应该如何删除某些内容，但是，关于切换功能，我有一个功能，可以在切换时将文本从“显示”更改为“隐藏”或以相反的方式。如何在角度格式中实现这一点？明白了，但是如果没有事件处理程序，如何在切换时将文本从“隐藏”更改为“显示”或以相反的方式？使用第三级操作符。请参阅更新<代码>{phone.hide？'Show'：'hide'}
注意，从长远来看，在控制器中执行此逻辑（请参见@Tom的答案）可能会更好，以防您需要做的不仅仅是从数组中删除它，或者更改手机上的属性。在控制器上运行单元测试也比在视图上运行单元测试容易得多。可能不是，但这是最好的方法。远没有替代品复杂，而且性能可能更高。@user1896653，请查看类似的内容，尤其是手风琴（？），它主要完成您所需的功能，您可以在delete中构建。还有
ngAnimate.js
可以帮助你做你想做的事情，但是你仍然需要为动画编写CSS。明白了，但是如果没有事件处理程序，我如何在切换时将文本从“隐藏”更改为“显示”或以相反的方式？使用第三级操作符。请参阅更新<代码>{{phone.hide？'Show'：'hide'}

注意，在控件中执行此逻辑