Question

我正在从表中获取数据并显示为多重复选复选框。当我选中复选框时，我会将数据推送到该特定复选框的数组上。但是当取消选中时，应该从数组中删除相应的数据。我怎样才能实现此目的？< / p>

HTML：

<div ng-repeat="data in filters.status" >
    <label class="Form-label--tick">
        <input type="checkbox" value="data.id" id="status" ng-model="status" class="Form-label-checkbox"  ng-change="IfCheck(data.id,status)" >
        <span class="Form-label-text"> {{data.status}}</span>
    </label>
</div>

使用Javascript：

<script>
    $scope.IfCheck = function (data, check) {
        if (check) {
            status.push(data);
            $scope.checkedData[0].status = status;
        }
        else {
            var index = $scope.status.indexOf(data);
            $scope.status.splice(index);
        }

    };
</script>

Answer 1

这可以这样写：

var app = angular.module('sa', []);
app.controller('FooCtrl', function($scope) {
  $scope.ids = [];

  $scope.filters = [{
    id: 1,
    status: false
  }, {
    id: 2,
    status: false
  }, {
    id: 3,
    status: false
  }]

  $scope.IfCheck = function(id, check) {
    if (check) {
      $scope.ids.push(id);
    } else {
      var index = $scope.ids.indexOf(id);
      $scope.ids.splice(index, 1);
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="sa" ng-controller="FooCtrl">
  <div ng-repeat="data in filters">
    <label class="Form-label--tick">
      <input type="checkbox" value="data.id" id="status" ng-model="data.status" class="Form-label-checkbox" ng-change="IfCheck(data.id, data.status)">
      <span class="Form-label-text"> {{data.status}}</span>
    </label>
  </div>

  Selected ids: {{ids}}
</div>

Answer 2

您可以使用ng-model查看输入是否已选中或未选中。请注意，我简化了代码，因此您需要将各种属性和逻辑添加到以下内容中：

HTML：

<input type="checkbox" ng-model="isChecked" ng-change="IfCheck()">

JS：

$scope.isChecked = false;

$scope.IfCheck = function () {
  if ($scope.isChecked === true) {
    // checked
  } else {
    // unchecked
  }
};

这是example用于ng-model isChecked的复选框输入的documentation plnkr。

对于多个复选框，您需要为每个复选框跟踪{{1}}之类的内容。

选中复选框时在阵列上推送数据，并在取消选中复选框时删除数据

2 个答案: