jquery - angular里li中按钮删除本行？

Question

//HTML部分
<ul class="rows">

<p class="btnBox">
    <button class="change" ui-sref="home" ng-click="redact()">编辑</button><br />
</p>
<li ng-repeat="(row,value) in data">
    <span id="hid" style="display:inline-block;white-space: nowrap;overflow: hidden;width: 200px;text-overflow: ellipsis;">{{value.content}}</span>
    <button class="showBtn" ng-show="value.show">删除</button class="showBtn" >
    <span>{{value.title}}</span>
</li>

</ul>

//js部分
$scope.redact = function() {

            if($(".change").html() == "编辑") {
                $(".change").html("完成")
                angular.forEach(data, function(data) { data.show = true })
                //当删除按钮显示时，实现其删除
                console.log($(".showBtn"))
                //$(".showBtn").onclick = function(){alert(1)}
                //$("li").each = function() {$(".showBtn").onclick = function() { alert(1) }}
                //$(".showBtn").each = function() {$(this).onclick = function() { alert(1) }}
            } else if($(".change").html() == "完成") {
                $(".change").html("编辑")
                angular.forEach(data, function(data) { data.show = false })
            }
        }

为什么 注释部分无反馈？？错了吗？哪里错了？该如何改？

Answer 1

Angular est un modèle basé sur les données. Si vous supprimez une ligne, supprimez simplement l'élément à cette position dans le tableau.

C'est-à-dire :

$scope.data.splice(index,1);// index 为你点击的索引

Answer 2

Vous devez lier ng-click au bouton de suppression, car ce que vous voulez réaliser est de cliquer sur le bouton de suppression de la ligne actuelle pour supprimer la ligne actuelle. ng-click，因为你要实现的是点击当前行的删除按钮，删除当前行。

<button class="showBtn" ng-show="value.show" ng-click="removeLine($index)">删除</button class="showBtn" >

$scope.removeLine = function(index) {
  $scope.data.splice(index, 1);
}

至于 $index 是啥，其实就是 ng-repeat 过程中，一个隐藏的值。$index 存在于每一个生成的元素中，从 0 开始。$scope.data 也是从 index 为 0 开始，所以就有了上面的写法。只要你传入了当前的 $index，就可以定位到要删除的数据，直接在 data 中删除就行。数据改变的时候就会自动更新页面显示内容，这是数据驱动的一个特点。

---

没看懂你想在 $scope.redact 里面实现什么。如果你改 data.show，然后又在 button 里面写了 ng-show="value.show"，那么证明这个 show 是用来控制 “删除” 按钮显示与否的，而不是去控制当前行显示与否。因此，看不出这段代码与你需求之间有何关联
另外，$(".change").html() 你这是在用 jQuery 去实现 toggle？jQuery 的思路与 AngularJS 就完全不同。jQuery 是事件驱动，AngularJS 是数据驱动。这里如果你要实现按钮文字 “编辑” 换成 “完成”，完全可以通过 $scope 与 {{}}（interpolation）来实现。比如：

$scope.buttonText = '编辑';

<button>{{buttonText}}</button>

然后给这个 button 加上 ng-click

<button ng-click="edit()">{{buttonText}}</button>

然后写好回调：

$scope.edit = {
  if ($scope.buttonText === '编辑') {
    $scope.buttonText = '完成';
  } else if ($scope.buttonText === '完成') {
    $scope.buttonText = '编辑';
  }
}

这样就可以实现最基本的 toggle。可以做的优化是，如果你的状态只有编辑和完成两种，那么完全可以设置一个 flag，$scope.editFlag = true。true 代表编辑状态，false 代表完成状态。参照上面的思路，if 里面直接用这个 $scope.editFlag rrreee rrreee

Quant à ce qu'est $index, il s'agit en fait d'une valeur cachée lors du processus ng-repeat. $index existe dans chaque élément généré, à partir de 0. $scope.data commence également à partir de l'index 0, il existe donc la méthode d'écriture ci-dessus. Tant que vous transmettez le $index actuel, vous pouvez localiser les données à supprimer et les supprimer directement dans data. Lorsque les données changent, le contenu affiché de la page sera automatiquement mis à jour, ce qui est une caractéristique des données.

---

Je ne comprends pas ce que vous voulez réaliser dans $scope.redact. Si vous modifiez data.show puis écrivez ng-show="value.show" dans button, alors prouvez ceci show est utilisé pour contrôler si le bouton "Supprimer" est affiché, et non pour contrôler si la ligne actuelle est affichée. Par conséquent, je ne vois aucun lien entre ce code et vos besoins
De plus, $(".change").html() Utilisez-vous jQuery pour implémenter la bascule ? L’idée de​​jQuery est complètement différente de celle d’AngularJS. jQuery est basé sur les événements et AngularJS est basé sur les données. Si vous souhaitez remplacer le texte du bouton "Modifier" par "Terminé" ici, vous pouvez le faire via $scope et {{}} (interpolation). Par exemple : 🎜 rrreee 🎜Puis ajoutez ng-click🎜 à ce bouton rrreee 🎜Ensuite, écrivez le rappel : 🎜 rrreee 🎜De cette façon, vous pouvez obtenir la bascule la plus basique. L'optimisation qui peut être effectuée est que si votre statut est uniquement l'édition et l'achèvement, vous pouvez alors définir un indicateur, $scope.editFlag = true. true représente l'état d'édition et false représente l'état d'achèvement. En vous référant à l'idée ci-dessus, utilisez simplement ce $scope.editFlag directement dans if pour juger. 🎜 🎜Puisque vous utilisez AngularJS, adaptez-vous aux idées d'AngularJS. Pour vos besoins actuels, vous n'avez pas besoin d'utiliser jQuery pour y parvenir🎜.