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 はデータ駆動型モデルです。行を削除する場合は、配列内のその位置にある要素を削除するだけです。

つまり:

リーリー

Answer 2

現在の行の削除ボタンをクリックして現在の行を削除することが目的なので、ng-clickを削除ボタンにバインドする必要があります。

リーリー リーリー

$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 与 {{}} リーリー

次に、このボタンに

ng-click を追加します リーリー

次にコールバックを書きます:

リーリー

この方法で、最も基本的な切り替えを実現できます。実行可能な最適化は、ステータスに編集中と完了の 2 つのステータスしかない場合、フラグを設定して

それを判断するだけです。 $scope.editFlag = true。true 代表编辑状态，false 代表完成状态。参照上面的思路，if 里面直接用这个 $scope.editFlag

AngularJS を使用しているため、現在のニーズに合わせて AngularJS のアイデアを実現するために jQuery を使用する必要はありません。