jquery - Bagaimana untuk memadam baris ini dalam butang li dalam sudut?

Question

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

//bahagian 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 })
            }
        }

Mengapa tiada maklum balas di bahagian komen? ? salah ke? Apa yang silap? Bagaimana cara menukarnya?

Answer 1

Angular ialah model dipacu data Jika anda memadamkan baris, hanya padamkan elemen pada kedudukan itu dalam tatasusunan.

Iaitu:

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

Answer 2

Anda perlu mengikat ng-click pada butang padam, kerana apa yang anda ingin capai ialah mengklik butang padam baris semasa untuk memadam baris semasa. 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

Bagi apa itu $index, ia sebenarnya adalah nilai tersembunyi semasa proses ng-repeat. $index wujud dalam setiap elemen yang dijana, bermula dari 0. $scope.data juga bermula dari indeks 0, jadi terdapat kaedah penulisan di atas. Selagi anda memasukkan $index semasa, anda boleh mencari data yang hendak dipadamkan dan memadamnya terus dalam data. Apabila data berubah, kandungan paparan halaman akan dikemas kini secara automatik, yang merupakan ciri dipacu data.

---

Saya tidak faham perkara yang anda mahu capai dalam $scope.redact. Jika anda menukar data.show dan kemudian tulis ng-show="value.show" dalam butang, kemudian buktikan show digunakan untuk mengawal sama ada butang "Padam" dipaparkan, bukan untuk mengawal sama ada baris semasa dipaparkan. Oleh itu, saya tidak nampak sebarang hubungan antara kod ini dan keperluan anda
Selain itu, $(".change").html() Adakah anda menggunakan jQuery untuk melaksanakan togol? Idea jQuery berbeza sama sekali daripada AngularJS. jQuery dipacu peristiwa dan AngularJS dipacu data. Jika anda ingin menggantikan teks butang "Edit" dengan "Selesai" di sini, anda boleh melakukannya melalui $scope dan {{}} (interpolasi). Contohnya: 🎜 rrreee 🎜Kemudian tambah ng-click🎜 pada butang ini rrreee 🎜Kemudian tulis panggilan balik: 🎜 rrreee 🎜Dengan cara ini anda boleh mencapai togol paling asas. Pengoptimuman yang boleh dilakukan ialah jika status anda hanya mengedit dan menyelesaikan, maka anda boleh menetapkan bendera, $scope.editFlag = true. true mewakili status pengeditan dan false mewakili status penyiapan. Merujuk kepada idea di atas, hanya gunakan $scope.editFlag ini terus dalam if untuk menilai. 🎜 🎜Memandangkan anda menggunakan AngularJS, sesuaikan dengan idea AngularJS Untuk keperluan semasa anda, anda tidak perlu menggunakan jQuery untuk mencapainya🎜