How to change properties of firebase array using angularfire?

Question

I get the correct record from the firebase array using the $getRecord but I can not save the changes made in the input fields. Our Add Controller works. What have we done wrong? Can anyone help? Thank you!

Edit Controller

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

Add Controller

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

Factory

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>

Kyle · Accepted Answer · 2015-10-03 15:44:41Z

1

You're edit function:

$scope.editRecipe = function(recipe){ $scope.recipes.$save(recipe).then(function(){}); }

is expecting the "recipe" to be passed in, but I don't see it being passed in anywhere. It looks like you are saving the current recipe to:

$scope.recipe

so if $scope.recipe has the correct object, I think you just have to save the scoped recipe opposed to passing it in.

$scope.editRecipe = function(){ $scope.recipes.$save($scope.recipe).then(function(){}); }

answered Oct 3, 2015 at 15:44

Kyle

1,5031 gold badge12 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Noerdli Over a year ago

app.controller("EditRecipeController", function($scope, $location, $routeParams, $firebaseArray) {     $scope.recipes.$loaded().then(function(recipeid) {       $scope.recipe = recipeid.$getRecord($routeParams.id);     })      $scope.editRecipe = function(){     $scope.recipes.$save($scope.recipe).then(function(){}); } });

Hi Kyle! Thank you for your help. I changed the function, but it is still not working. Console.log($scope.recipe) shows me, that the recipe is not changed. Any other ideas? Again, thank you so much!

Kyle Over a year ago

ok, I think i see - you have a perfectly synced array with firebase - when you $add to firebase you are grabbing all of models you want:

{     title: $scope.title,     lead: $scope.lead,     keyword: $scope.keyword,     ingredient: $scope.ingredient,     instructions: $scope.instructions   }

but when you $save() you are not updating the actual values - you are only displaying them with ng-value. You must make your ng-models point at the selected spot in the synced array. So without changing the logic of the code you will have to add recipe.whatever to all of the models. Make sense?

Noerdli Over a year ago

Kyle, you are my hero! I changed the ng-models to recipe.whatever and updated the AddRecipeController and now both, adding and updating, are working perfectly. Thank you so much!

Collectives™ on Stack Overflow

How to change properties of firebase array using angularfire?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related