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-25T12:02:36.877

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 '13 at 12:02

answered Oct 25 '13 at 11:31

Maxim Shoustin

77,483
27
203
225

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 Oct 25 '13 at 11:46
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.... – kSeudo Oct 25 '13 at 11:52
controller has `$scope.fruits` - this is your model and this model changes if you lpay with GUI (in basic words) – Maxim Shoustin Oct 25 '13 at 11:57
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 Oct 25 '13 at 12:53
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... – kSeudo Oct 25 '13 at 13:38
You can remove it. Its just example how to do copy of model. When you press on send button you send your model to server. – Maxim Shoustin Oct 25 '13 at 13:57

score 0 · Answer 2 · answered Oct 25 '13 at 12:02

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);
     }
   }
 });

Saving a checkbox list in Angularjs with node

2 Answers2