Saving a checkbox list in Angularjs with node

Question

I want to save and load a checkbox list using binding in angularjs with a node backend. This SO question (How do I bind to list of checkbox values with AngularJS?) answers how I can load the check box from a static javascript object but how can I save the checkbox values after the user selects them?

I want to save the checkbox values in a single field but how can I tell angular to bind the checkbox values into a single field defined in a model to my mongodb? I cant just use ng-model as there are multiple checkboxes.

Needless to say that I am new to angular so any help here is greatly appreciated ...

Thanks for any help you can provide.

kseudo

Maxim Shoustin · Accepted Answer · 2013-10-25 12:02:36Z

3

Just add ng-model to your checkbox. By this way you can update model in controller on any checkbox state change.

Here is example:

HTML

<div ng-controller="Ctrl">
    <label ng-repeat="fruit in fruits">
  <input
    type="checkbox"
    name="fruit.name"
   ng-model="fruit.value"
  > {{fruit.name}}
</label>
    <pre>{{fruits| json}}</pre>    
</div>

JS

var app = angular.module('app', []);
function Ctrl($scope) {
    $scope.fruits = [{
        name: 'apple',
        value: false
    }, {
        name: 'orange',
        value: false
    }, {
        name: 'pear',
        value: false
    }, {
        name: 'naartjie',
        value: false
    }];
}

Demo Fiddle

[EDIT]

BTW we can make the copy by using angular.copy() method. When we press button, the new copy of fruits model will be created (and you should send it to server as json). Old model fruits will stay the same:

$scope.fruitsCopy = [];

 $scope.init = function(){
  $scope.fruitsCopy = angular.copy($scope.fruits );
}

To convert data to JSon I would use:

var jsonData = JSON.stringify($scope.fruitsCopy);

Demo2 Fiddle

edited Oct 25, 2013 at 12:02

answered Oct 25, 2013 at 11:31

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

kSeudo Over a year ago

Thanks for your quick reply Maxim. I want to save the checkbox values as a json string in a field of a model. So when the user clicks save, this string is generated: [ { name: 'apple', checked: true }, { name: 'orange', checked: false } ] and saved to a model like team.fruits. Could you suggest some code on how I can use the state change to achieve this? Thanks again.

kSeudo Over a year ago

Thanks again for your super quick reply Maxim. How can I pass the value evaluated by {{fruits| json}} to the controller so that it will be saved to a model field eg"foods.fruits"? At the moment I just cant see how this value can be passed through to the controller....

Maxim Shoustin Over a year ago

controller has $scope.fruits - this is your model and this model changes if you lpay with GUI (in basic words)

kSeudo Over a year ago

Its take me about four hours but I finally have a checkbox that save and populates correctly. Many thanks Maxim for taking the time to help me with this.

kSeudo Over a year ago

One last thing: why do I have to make a copy of the fruits model? I think this must have something to do with scope but Im struggling to understand this...

|

package · Accepted Answer · 2013-10-25 12:02:24Z

Let's say you defined your model as such:

function Ctrl($scope) {
    $scope.items = [{
      name: 'A',
      checked: false
    }, {
      name: 'B',
      checked: false
    }, {
      name: 'C',
      checked: false
    }, {
      name: 'D',
      checked: false
    }];
}

And created a view for the model:

<ul>
   <li ng-repeat="item in items">
      <label>
        <input type="checkbox" ng-model="item.checked">
        {{item.name}}
      </label>
   </li>
</ul>
<button ng-click="save()">save</button>

Next you have to define save function:

$scope.save = function() {
  //angular.toJson converts array to string, something like
  // '[{"name":"A","checked":false},{"name":"B","checked":true},...]'
  var json = angular.toJson($scope.items);
  //Service is angular service for your model that makes http requests to your backend
  Service.save(json).then(function(){
    //here you can notify user that data is persisted
  }, function() {
    //here you can notify user that there was a problem with request
  });
}

And a simple model service:

.service('Service', function($http) {
   return new function() {
     this.save = function(data) {
       return $http.post('url/to/backend', data);
     }
   }
 });

Collectives™ on Stack Overflow

Saving a checkbox list in Angularjs with node

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related