将多个复选框提交到 firebase

Question

我正在使用 Angularfire，我想通过多个复选框来保存数据。

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

这是结果

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

我的问题是有什么方法可以像这样保存它们吗？

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

Answer 1

我拼凑了一个粗略的example PLNKR to demonstrate one way to do this by extending the AngularFire services。

请注意，文档指出：

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

解决方案

您可以创建一个扩展 $firebaseObject 的工厂，并添加一个使用 .push() 为新任务生成新密钥的方法 .addTask()。

工厂：

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

控制器：

注意：我使用了模拟对象。我无法解码您的数据结构，并采用了最佳猜测方法。

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

});

结果（`<firebaseUrl>/tasks`）：

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

同样，这里的重点是工厂，而不是数据结构。我示例中的表单数据没有意义。

希望对您有所帮助。

将多个复选框提交到 firebase

Submit multiple checkbox to firebase

angularjs

firebase

angularfire

解决方案

工厂：

控制器：

结果（`<firebaseUrl>/tasks`）：

将多个复选框提交到 firebase

Submit multiple checkbox to firebase

angularjs

firebase

angularfire

解决方案

工厂：

控制器：

结果（<firebaseUrl>/tasks）：

结果（`<firebaseUrl>/tasks`）：