如何使用 angularfire 更改 firebase 数组的属性?
How to change properties of firebase array using angularfire?
我使用 $getRecord 从 firebase 数组中获取了正确的记录,但我无法保存在输入字段中所做的更改。我们的添加控制器工作。我们做错了什么?谁能帮忙?谢谢!
编辑控制器
app.controller("EditRecipeController", function($scope, $location, $routeParams, $firebaseArray) {
$scope.recipes.$loaded().then(function(recipeid) {
$scope.recipe = recipeid.$getRecord($routeParams.id);
$scope.editRecipe = function(recipe) {
$scope.recipes.$save(recipe).then(function() {
})};});});
添加控制器
app.controller("AddRecipeController", ["$scope", "createRecipes", function($scope, createRecipes) {
$scope.recipes = createRecipes;
$scope.addRecipe = function() {
$scope.recipes.$add({
title: $scope.title,
lead: $scope.lead,
keyword: $scope.keyword,
ingredient: $scope.ingredient,
instructions: $scope.instructions
});
alert("Your recipe has been succefully saved!")
// reset the recipe input
$scope.recipe = "";
};}]);
工厂
app.factory("createRecipes", ["$firebaseArray",function($firebaseArray) {
var ref = new Firebase("https://fiery-inferno-8595.firebaseio.com/recipes/");
return $firebaseArray(ref);}]);
HTML
<section id="{{recipe.$id}}" class="recipe-description editor">
<form ng-submit="addRecipe()">
<section class="headColumn">
<div class="mySearch">
<span>My search: </span>
<span ng-bind="search.$"></span>
</div>
<h2>
<input type="text" ng-model="title" name="recipeTitle" ng-value="recipe.title" required="">-
<input type="text" ng-model="lead" name="recipeLead" ng-value="recipe.lead" required="">
</h2>
<ul class="keywords">
<li><label></label>Categories: </li>
<li ng-repeat="keyword in keywords track by $index">
<input type="text" ng-model="keywords[$index]" name="recipeKeyword" ng-value="recipe.keywords" placeholder="Add a keyword">
<button class="remove-field" ng-show="$last" ng-click="removeKeyword()">-</button>
</li>
<button class="add-field" ng-click="addKeyword()">+</button>
</ul>
</section>
<section class="sideColumn">
<h4>Ingredients</h4>
<ul class="ingredients">
<li ng-repeat="ingredient in ingredients track by $index">
<input type="text" ng-model="ingredients[$index]" name="recipeIngredient" ng-value="recipe.ingredients" placeholder="Add an ingredient">
<button class="remove-field" ng-show="$last" ng-click="removeIngredient()">-</button>
</li>
<button class="add-field" ng-click="addIngredient()">+</button>
</ul>
</section>
<section class="mainColumn">
<div class="readytime">
<h4>Time until ready</h4>
<ul>
<li>
<span>Preperation Time: </span>
<input type="text" ng-model="preptime" name="recipePreptime" ng-value="recipe.preptime" placeholder="Add preperation Time">
</li>
<li>
<span>Cooking Time: </span>
<input type="text" ng-model="cookingtime" name="recipeCookingtime" ng-value="recipe.cookingtime" placeholder="Add cooking Time">
</li>
</ul>
</div>
<div class="instructions">
<h4>Instructions</h4>
<!--TO DO: This input should work like textarea -->
<input type="text" ng-model="instructions" name="recipeInstructions" ng-value="recipe.instructions">
</div>
</section>
<button ng-click="addRecipe()" ng-hide="recipe" type="submit">Save the Recipe</button>
<button ng-click="editRecipe()" type="submit" ng-show="recipe">Update the Recipe</button>
</form>
您正在编辑函数:
$scope.editRecipe = function(recipe){
$scope.recipes.$save(recipe).then(function(){});
}
期待 "recipe" 被传递,但我没有看到它被传递到任何地方。您似乎正在将当前食谱保存到:
$scope.recipe
所以如果 $scope.recipe
有正确的对象,我认为你只需要保存作用域配方而不是传递它。
$scope.editRecipe = function(){
$scope.recipes.$save($scope.recipe).then(function(){});
}
我使用 $getRecord 从 firebase 数组中获取了正确的记录,但我无法保存在输入字段中所做的更改。我们的添加控制器工作。我们做错了什么?谁能帮忙?谢谢!
编辑控制器
app.controller("EditRecipeController", function($scope, $location, $routeParams, $firebaseArray) {
$scope.recipes.$loaded().then(function(recipeid) {
$scope.recipe = recipeid.$getRecord($routeParams.id);
$scope.editRecipe = function(recipe) {
$scope.recipes.$save(recipe).then(function() {
})};});});
添加控制器
app.controller("AddRecipeController", ["$scope", "createRecipes", function($scope, createRecipes) {
$scope.recipes = createRecipes;
$scope.addRecipe = function() {
$scope.recipes.$add({
title: $scope.title,
lead: $scope.lead,
keyword: $scope.keyword,
ingredient: $scope.ingredient,
instructions: $scope.instructions
});
alert("Your recipe has been succefully saved!")
// reset the recipe input
$scope.recipe = "";
};}]);
工厂
app.factory("createRecipes", ["$firebaseArray",function($firebaseArray) {
var ref = new Firebase("https://fiery-inferno-8595.firebaseio.com/recipes/");
return $firebaseArray(ref);}]);
HTML
<section id="{{recipe.$id}}" class="recipe-description editor">
<form ng-submit="addRecipe()">
<section class="headColumn">
<div class="mySearch">
<span>My search: </span>
<span ng-bind="search.$"></span>
</div>
<h2>
<input type="text" ng-model="title" name="recipeTitle" ng-value="recipe.title" required="">-
<input type="text" ng-model="lead" name="recipeLead" ng-value="recipe.lead" required="">
</h2>
<ul class="keywords">
<li><label></label>Categories: </li>
<li ng-repeat="keyword in keywords track by $index">
<input type="text" ng-model="keywords[$index]" name="recipeKeyword" ng-value="recipe.keywords" placeholder="Add a keyword">
<button class="remove-field" ng-show="$last" ng-click="removeKeyword()">-</button>
</li>
<button class="add-field" ng-click="addKeyword()">+</button>
</ul>
</section>
<section class="sideColumn">
<h4>Ingredients</h4>
<ul class="ingredients">
<li ng-repeat="ingredient in ingredients track by $index">
<input type="text" ng-model="ingredients[$index]" name="recipeIngredient" ng-value="recipe.ingredients" placeholder="Add an ingredient">
<button class="remove-field" ng-show="$last" ng-click="removeIngredient()">-</button>
</li>
<button class="add-field" ng-click="addIngredient()">+</button>
</ul>
</section>
<section class="mainColumn">
<div class="readytime">
<h4>Time until ready</h4>
<ul>
<li>
<span>Preperation Time: </span>
<input type="text" ng-model="preptime" name="recipePreptime" ng-value="recipe.preptime" placeholder="Add preperation Time">
</li>
<li>
<span>Cooking Time: </span>
<input type="text" ng-model="cookingtime" name="recipeCookingtime" ng-value="recipe.cookingtime" placeholder="Add cooking Time">
</li>
</ul>
</div>
<div class="instructions">
<h4>Instructions</h4>
<!--TO DO: This input should work like textarea -->
<input type="text" ng-model="instructions" name="recipeInstructions" ng-value="recipe.instructions">
</div>
</section>
<button ng-click="addRecipe()" ng-hide="recipe" type="submit">Save the Recipe</button>
<button ng-click="editRecipe()" type="submit" ng-show="recipe">Update the Recipe</button>
</form>
您正在编辑函数:
$scope.editRecipe = function(recipe){
$scope.recipes.$save(recipe).then(function(){});
}
期待 "recipe" 被传递,但我没有看到它被传递到任何地方。您似乎正在将当前食谱保存到:
$scope.recipe
所以如果 $scope.recipe
有正确的对象,我认为你只需要保存作用域配方而不是传递它。
$scope.editRecipe = function(){
$scope.recipes.$save($scope.recipe).then(function(){});
}