【问题标题】:How to change properties of firebase array using angularfire?如何使用 angularfire 更改 firebase 数组的属性?
【发布时间】:2015-12-31 12:58:50
【问题描述】:

我使用 $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>

【问题讨论】:

    标签: angularjs firebase angularfire


    【解决方案1】:

    你是编辑功能:

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

    期待“配方”被传递,但我没有看到它被传递到任何地方。看起来您正在将当前配方保存到:

    $scope.recipe

    所以如果$scope.recipe 有正确的对象,我认为你只需要保存范围内的配方而不是将其传入。

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

    【讨论】:

    • 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(){}); } }); 嗨凯尔!谢谢您的帮助。我更改了功能,但它仍然无法正常工作。 Console.log($scope.recipe) 告诉我,配方没有改变。还有其他想法吗?再次,非常感谢!
    • 好的,我想我明白了 - 你有一个与 firebase 完美同步的数组 - 当你 $add 到 firebase 时,你正在抓取你想要的所有模型:{ title: $scope.title, lead: $scope.lead, keyword: $scope.keyword, ingredient: $scope.ingredient, instructions: $scope.instructions } 但是当你 $save() 你没有更新实际值 - 你只是用 ng-value 显示它们。您必须使您的 ng-models 指向同步数组中的选定位置。因此,在不更改代码逻辑的情况下,您必须将 recipe.whatever 添加到所有模型中。有意义吗?
    • 凯尔,你是我的英雄!我将 ng-models 更改为 recipe.whatever 并更新了 AddRecipeController,现在添加和更新都可以正常工作。非常感谢!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-12-24
    • 2014-12-23
    • 2021-04-21
    • 2014-04-24
    • 2020-11-01
    • 1970-01-01
    相关资源
    最近更新 更多