问题描述
//HTML部分<ul class='rows'>
<p class='btnBox'> <button ui-sref='home' ng-click='redact()'>编辑</button><br /></p><li ng-repeat='(row,value) in data'> <span style='display:inline-block;white-space: nowrap;overflow: hidden;width: 200px;text-overflow: ellipsis;'>{{value.content}}</span> <button ng-show='value.show'>删除</button > <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 }) }}
为什么 注释部分无反馈？？错了吗？哪里错了？该如何改？
问题解答
回答1：angular 都是数据驱动模型的，删除一行的话，把数组中那个位置的元素删掉就行。
即：
$scope.data.splice(index,1);// index 为你点击的索引回答2：
你需要给删除按钮绑定上 ng-click，因为你要实现的是点击当前行的删除按钮，删除当前行。
<button ng-show='value.show' ng-click='removeLine($index)'>删除</button >
$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 去实现
