使用angularjs中复选框的值更新数组

Update array with value of checkbox checked in angularjs

本文关键字：更新 数组 复选框 angularjs 使用      更新时间：2024-02-05

我有一个数组，如下

var selected = [];
$scope.listA = [
  {
    name : "Sample 1"
  },
  {
    name : "Sample 2"
  },
  {
    name : "Sample 3"
  }
];

输入的html元素是

<div ng-repeat="label in checkMode()">
    <input type="checkbox" checked> {{ label.name }}</input>
</div>

如何根据选中的复选框获取选定值的数组？例如，我想获得以下选定的值

var selected = ["sample 1","sample 3"];

还可以更新阵列。

这里有一个简单的轻量级指令来执行

http://vitalets.github.io/checklist-model/

您可以像一样使用ng-checked来实现这一点

var app = angular.module('my-app', [], function() {})
app.controller('AppController', function($scope) {
  $scope.selected = ['Sample 2'];
  $scope.listA = [{
    name: "Sample 1"
  }, {
    name: "Sample 2"
  }, {
    name: "Sample 3"
  }];
  $scope.toggleChecked = function(item) {
    var index = $scope.selected.indexOf(item.name);
    if (index == -1) {
      $scope.selected.push(item.name);
    } else {
      $scope.selected.splice(index, 1);
    }
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app">
  <div ng-controller="AppController">
    <div ng-repeat="label in listA">
      <input type="checkbox" ng-checked="selected.indexOf(label.name) > -1" ng-click="toggleChecked(label)">{{ label.name }}
    </div>
    <pre>{{selected}}</pre>
  </div>
</div>

非常简单。。

在复选框中添加一键功能，希望这能起作用。。。引用链接。。。jsbin

<div ng-repeat="label in checkMode()">
   <input type="checkbox" checked ng-click="toggleSelection(label.name)> {{ label.name }}</input>
</div>
$scope.listA = {
    name : "Sample 1"
  },
  {
    name : "Sample 2"
  },
  {
    name : "Sample 3"
  }
];
$scope.selected=[];
  $scope.toggleSelection = function toggleSelection(selected) {
    var idx = $scope.selected.indexOf(selected);
    // is currently selected
    if (idx > -1) {
      $scope.selected.splice(idx, 1);
    }
    // is newly selected
    else {
      $scope.selected.push(fruitName);
    }
  };
相关文章：