Unable to add data to firebase from angular and ionic
Question
I'm just trying to add a list of names to a Firebase using angularFire. My scripts are simple:
controller.js
angular.module('starter.controllers', [])
.controller('MainCtrl', function($scope, $firebaseObject) {
var ref = new Firebase("https://list-detail-001.firebaseio.com/");
var syncObject = $firebaseObject(ref);
// synchronize the object with a three-way data binding
// click on `index.html` above to see it used in the DOM!
syncObject.$bindTo($scope, "users");
$scope.newUser={};
$scope.add=function(){
console.log($scope.newUser);
console.log($scope.users);
console.log(syncObject);
$scope.users.$add($scope.newUser);
$scope.newUser='';
}
})
index.html:
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-positive">
<h2 class="title">Blank Starter</h2>
</ion-header-bar>
<ion-content>
<div class="list">
<div class="item item-input-inset" ng-controller="MainCtrl">
<label class="item-input-wrapper">
<input type="text" placeholder="Name" ng-model="newUser.title">
</label>
<button class="button button-small" ng-click="add()">
Add
</button>
</div>
</div>
</ion-content>
</ion-pane>
</body>
My app.js is standard for ionic except I injected the firebase module:
angular.module('starter', ['ionic','starter.controllers','firebase'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
I just want to be able to add one name at a time from my index.html to firebase. The firebase is currently empty. I want to use this app to be able to add in some dummy data. I just cannot seem to get it to work. $scope.users.$add or even $scope.users.push seems to be an undefined function. Please help! Thanks.
2 answers
solution1
2 2015-05-27 04:47:42
According to Firebase documentation you should be using $firebaseArray in your case $firebaseObject.
Is it possible that you're missing Firebase concept? Firebase object is not a collection. If you want to store data you do it on key/value basis. Arrays in Firebase is a sweetener for {0: val1, 1: val2 ....} . Read Firebase warnings about arrays before using them
solution2
1 2015-05-27 13:01:11
Fixed it with this:
controller.js:
angular.module('starter.controllers', [])
.controller('MainCtrl', function($scope, $firebaseArray) {
var ref = new Firebase("https://list-detail-001.firebaseio.com/users");
$scope.users = $firebaseArray(ref);
$scope.add=function(){
$scope.users.$add({
text: $scope.newUser
});
}
});
only change I made to index.html was this line:
<input type="text" placeholder="Name" ng-model="newUser">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.