Submit multiple checkbox to firebase

Question

I am using Angularfire and I'd like to save data by multiple checkbox.

HTML

<form role="form" ng-submit="addTask(task)">
  <label class="checkbox-inline" ng-repeat="(key, value) in students">
    <input type="checkbox" id="{{key}}" value="{{key}}" ng-model="task.student[value.name]">{{value.name}}
  </label>
 <button type="submit">Submit</button>
</form>

JS

var ref = new Firebase(FURL);
var fbTasks = $firebaseArray(ref.child('tasks'));

$scope.addTask = function(task) {
    fbTasks.$add(task);
  }

This was the result

student
 --Alison Kay: true
 --Jessica Cook:false
 --John Smith: true
 --Kevin Hunt: true

My question is there any way to save them like this?

student
--(key)
  --name:Alison Kay
  --checked: true
--(key)
  --name:Jessica Cook
  --checked: false
--(key)
  --name:John Smith
  --checked: true
--(key)
  --name:Kevin Hunt
  --checked: true

sbolel · Accepted Answer · 2015-05-03 04:21:07Z

I threw together a rough example PLNKR to demonstrate one way to do this by extending the AngularFire services.

Note that the documentation states:

These techniques should only be attempted by advanced Angular users who know their way around the code.

Solution

You can create a factory that extends $firebaseObject, and adds a method .addTask() which uses .push() to generate a new key for a new task.

Factories:

app.factory("TaskList",function($rootScope, $q, fbUrl, TaskListFactory){
  return function(studentKey){
    var ref = new Firebase(fbUrl+'/tasks/'+studentKey);
    return new TaskListFactory(ref);
  }
});

app.factory("TaskListFactory",function($firebaseObject, $q, fbUrl, $rootScope){
  return $firebaseObject.$extend({
    addTask: function(name, checked){
      // use push to generate a new key, set `name` and `checked`
      this.$ref().push({name: name, checked: checked}, function(error){
        if(!error){
          console.error(error);
        } else {
          console.log("Pushed new task.");
        }
      });
    }
  });
});

Controller:

Note: I used mock objects. I couldn't decode your data structure, and took a best guess approach.

app.controller('HomeController',function($scope,fbUrl, $firebaseObject, TaskList) {
  // create mock student and task
  $scope.students = {tester: {name: 'tester'} };
  $scope.task = {tester: {name: 'test this'}};
  var taskList = new TaskList('student123');
  // get tasks list for debug:
  var tasksRef = new Firebase(fbUrl+'/tasks');
  $scope.tasks = $firebaseObject(tasksRef);

  $scope.addTask = function(task) {
    console.debug(task);
    taskList.addTask('Tester McGee', task.student['tester']);
  }

});

Result (`<firebaseUrl>/tasks`):

{
  "$id": "tasks",
  "$priority": null,
  "student123": {
    "-JoMxWoX0tQrGtdP6Qvm": {
      "checked": true,
      "name": "Tester McGee"
    }
  }
}

Again, the focus of this is on the factories, and not on the data structure. The form data in my example doesn't make sense.

Hope that helps.

Collectives™ on Stack Overflow

Submit multiple checkbox to firebase

1 Answer 1

Solution

Factories:

Controller:

Result (`<firebaseUrl>/tasks`):

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Solution

Factories:

Controller:

Result (<firebaseUrl>/tasks):

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Result (`<firebaseUrl>/tasks`):