向 Firebase 提交多个复选框



我正在使用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

我拼凑了一个粗略的示例 PLNKR,以演示一种通过扩展 AngularFire 服务来实现此目的的方法

请注意,文档指出:

这些技术只能由熟悉代码的高级 Angular 用户尝试。


溶液

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

工厂:

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"
    }
  }
}

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

希望有帮助。

最新更新