jquery - How to delete this row in the li button in angular?
高洛峰
高洛峰 2017-05-15 17:13:51
0
2
689

//HTML part
<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 part
$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 })
            }
        }

Why is there no feedback in the comments section? ? Wrong? What went wrong? How to change it?

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

reply all(2)
小葫芦

Angular is a data-driven model. If you delete a row, just delete the element at that position in the array.

That is:

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

You need to bind ng-click to the delete button, because what you want to achieve is to click the delete button of the current row to delete the current row.

<button class="showBtn" ng-show="value.show" ng-click="removeLine($index)">删除</button class="showBtn" >
$scope.removeLine = function(index) {
  $scope.data.splice(index, 1);
}

As for $index 是啥,其实就是 ng-repeat 过程中,一个隐藏的值。$index 存在于每一个生成的元素中,从 0 开始。$scope.data 也是从 index 为 0 开始,所以就有了上面的写法。只要你传入了当前的 $index,就可以定位到要删除的数据,直接在 data, just delete it. When the data changes, the page display content will be automatically updated, which is a characteristic of data-driven.


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

$scope.buttonText = '编辑';

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

Then add ng-click

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

Then write the callback:

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

This way you can achieve the most basic toggle. The optimization that can be done is that if your status only has two statuses: editing and completion, then you can set a flag and $scope.editFlag = truetrue 代表编辑状态,false 代表完成状态。参照上面的思路,if 里面直接用这个 $scope.editFlag just judge it.

Since you are using AngularJS, adapt to the ideas of AngularJS. For your current needs, you don’t need to use jQuery to achieve it

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template