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

Question

I have an array as below

var selected = [];

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

The input html element is

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

How can i get an array of selected values based on the checkboxes checked? For example, I want to get the below selected values

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

Also be able to update the array.

Answer 1

here is a simple lightweight directive that does this

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

Answer 2

Its very easy..

add one click function in checkbox, Hope this should work...ref link... 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);
    }
  };

Answer 3

You can use ng-checked to achieve this like

 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>