你需要给删除按钮绑定上 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
去判断就可以了。
既然用了 AngularJS,就去适应一下 AngularJS 的思路,对于你目前的需求,完全不需要用 jQuery 去实现
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…