Question

我对angularjs很新，这就是为什么我要问这个简单的问题。

我有一个联系人列表（显示在列表视图中）。每个列表视图都有一个复选框。

listview底部有一个删除按钮。我要实现的是，app应该根据复选框的值删除联系人。

当我以这种方式尝试时：

在控制器中，

$scope.checkBox = function (index)
{
    alert(index);
}

in html，

<table>
    <tr ng-repeat="n in completeList| filter:search">
        <td ng-click="detailView($index,'detailFlag')">
            <div><img width="100px" height="50px"  ng-src="{{n.gender_image}}" > </div>         
        <div>{{n.name}}</div>
        <div>{{n.email}}</div>
        <div>{{n.phone}}</div>
        </td>
        <td>
            <input type="checkbox" ng-model='Selected' ng-click="checkBox($index)" >
        </td>
    </tr>
</table>

这里我可以得到listview单元格的索引。

但我陷入困境，如何识别复选框是否被检查，并根据复选框bool值删除联系人。

任何人都可以帮助我。

提前致谢。

Answer 1

对于您的复选框，您目前有：

<input type="checkbox" ng-model='Selected' ng-click="checkBox($index)" >

因此，无论是否选中此复选框，该值都会存储在所有输入的一个变量中！

而是指定ng-model，让我们说selected范围内当前项的ng-repeat属性：

<table>
    <tr ng-repeat="n in completeList| filter:search">
        <td ng-click="detailView($index,'detailFlag')">
            <div><img width="100px" height="50px"  ng-src="{{n.gender_image}}" > </div>         
        <div>{{n.name}}</div>
        <div>{{n.email}}</div>
        <div>{{n.phone}}</div>
        </td>
        <td>
            <input type="checkbox" ng-model='n.selected' ng-click="checkBox(n)" >
        </td>
    </tr>
</table>

并更改您的checkBox功能，如下所示：

$scope.checkBox = function (item)
{
    if (item.selected === true) {
        // item selected
    } else {
        // item not selected
    }
}

Answer 2

如上一个答案所述，您必须将复选框状态绑定到n。

的属性

<table>
    <tr ng-repeat="n in completeList| filter:search">
      <td ng-click="detailView($index,'detailFlag')">

        <div><img width="100px" height="50px"  ng-src="{{n.gender_image}}" > </div>         
         <div>{{n.name}}</div>
         <div>{{n.email}}</div>
         <div>{{n.phone}}</div>
      </td>
      <td><input type="checkbox" ng-model="n.selected"></td>
    </tr>
</table>

但是根本不需要带有ngClick的checkBox（$ index）。至少对于刚设置所选状态的当前实现。

然后这可能是你的代码删除按钮逻辑：

<button ng-click="deleteItems()">Delete</button>

// controller code
$scope.deleteItems = function() {
  $scope.completeList = $scope.completeList.filter(
    function(item) {
      return !item.selected
    }
  );
}

您认为您只需要更改基础模型。

根据angularjs中的复选框值删除表视图的内容

2 个答案: