[SOLVED] How to get only selected checkboxes in angularjs?- Angular.js Recipes

  • I’m not sure how to do it though, this is what I have:

    I did get it working one way – by adding a property to each object and changing the of the checkbox to , I can then filter on that in the function.

  • This seems inefficient though, I don’t want to be adding extra properties to the model if can avoid it.
  • Is there a better way ?

JavaScript

var app = angular.module(‘plunker’, [‘ui’]);

app.controller(‘MyCtrl’, function($scope) {
$scope.records = [ { “Id”: 1 }, { “Id”: 2 }, { “Id”: 3 } ];
$scope.selected = {};
$scope.ShowSelected = function() {
$scope.records = $.grep($scope.records, function( record ) {
return $scope.selected[ record.Id ];
});
};
});

HTML

<div data-ng-controller=”MyCtrl”>
<ul>
<li data-ng-repeat=”record in records”>
<input type=”checkbox” ng-model=”selected[record.Id]”> {{record.Id}}
</li>
</ul>
<a href=”javascript:;” data-ng-click=”ShowSelected()”>Show Selected</a>
</div>

http://plnkr.co/edit/lqtDQ6

You can store the flag in separately and use it to filter the data.


@angular_recipe: How to get only selected checkboxes in angularjs? #Angular #AngularJS

ed data, and am trying to get only the ones the user has selected. I’m not sure how to do it though, this is what I have:

HTML:

  • {{record.Id}}

Show Selected

JS:

function MyCtrl($scope) { $scope.records = [ { “Id”: 1 }, { “Id”: 2 }, { “Id”: 3 } ]; $scope.ShowSelected = function() { // how can I get only the selected records here ? } }

function. This seems inefficient though, I don’t want to be adding extra properties to the model if can avoid it.

Is there a better way ?

var app = angular.module(‘plunker’, [‘ui’]); app.controller(‘MyCtrl’, function($scope) { $scope.records = [ { “Id”: 1 }, { “Id”: 2 }, { “Id”: 3 } ]; $scope.selected = {}; $scope.ShowSelected = function() { $scope.records = $.grep($scope.records, function( record ) { return $scope.selected[ record.Id ]; }); }; });

  • {{record.Id}}

Show Selected

You can store the flag in separately and use it to filter the data.

I believe the best way would be to add property ‘isSelected’ to your record and bind to that value. Something like this:

another thing you can do (specially if you ‘cannot’ add that extra property to the record, would be to maintain an array of selected items and add/remove them from the selected array when the user makes the selection:

The recordSelected function will be handled in your controller to add/remove and record from the selected records list.

PS: I used a negative record id to represent the record was unselected.

Angular.js Recipes are structured in a Cookbook format featuring recipes that contain problem statements and solutions. A detailed explanation follows each problem statement of the recipe. This is usually contained within the solution; however, an optional discussion section can often contain other useful information helping to demonstrate how the solution works.

Angular.js is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. The JavaScript components complement Apache Cordova, the framework used for developing cross-platform mobile apps. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications.

Lost? Begin by working through Angular’s Getting Started Guide to get yourself up-and-running.

[SOLVED] How to get only selected checkboxes in angularjs?- Angular.js Recipes

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.