我的代码

我的HTML只是2 ng-repeat s，我的目标是能够将项目添加到第二个（嵌套）ng-repeat

<div ng-app="myApp">
    <div class="nav" ng-controller="FoodsController as vm">
        <div class="level1" ng-repeat="foods in vm.foodGroups">{{foods.Name}}
            <button type="button" ng-click="vm.addNewFood()">add new food</button>
            <div ng-show="vm.newFoodBeingAdded">
                <input type="text">
            </div>
            <div class="level2" ng-repeat="food in foods.FoodsInGroup">{{food.Name}}</div>
        </div>
    </div>
</div>

My Angular控制器如下所示：

app.controller('FoodsController', function () {
    var vm = this;
    vm.foodGroups = [{
        "Name": "Grains",
            "FoodsInGroup": [{
            "Name": "Wheat"
        }, {
            "Name": "Oats"
        }]
    }, {
        "Name": "Fruits",
            "FoodsInGroup": [{
            "Name": "Apple"
        }, {
            "Name": "Orange"
        }]
    }];

    vm.newFoodBeingAdded = false;

    vm.addNewFood = function () {
        vm.newFoodBeingAdded = true;
    };
});

应该发生什么

一般工作流程是用户点击添加新按钮，它会显示带有“保存”按钮的文本框。文本框＆amp;按钮将在父foreach内。一旦用户保存了该项目，它就会被添加到嵌套的foreach中（该逻辑未显示）。

问题

问题是，当我点击“添加新食物”（它应该只显示1个文本框和保存按钮）时，所有文本框都会显示。我如何确保正确地“确定”这个并且只显示该父项中的文本框/按钮？

可能的解决方案

我找到的一个答案是为每个嵌套项创建一个子控制器。例如，我有一个FoodGroupsController来管理嵌套foreach的所有逻辑（因为除了在真实的应用程序中添加新项目之外还会有更多的事情，所以它可以被证明是合理的）。

的jsfiddle

Here's a jsFiddle，其代码目前无法正常运行。

Answer 1

有叉Fiddle

我做了一些改动。事实是，您正在将ng-show绑定到控制器中的单个var。这是一个向我展示或向我展示任何可能性。所以解决它，你必须把它绑在你的食品中，而不是控制器本身。

Html：

<button type="button" ng-click="vm.addNewFood(foods)">add new food</button>
    <div ng-show="foods.newFoodBeingAdded" class="add-new-food">
       <input type="text" placeholer="add a new food">
       <button type="button">save new food</button>
</div>

控制器：

vm.addNewFood = function (foods) {
    foods.newFoodBeingAdded = true;
};

使用此代码，您可以在函数的参数中传递食物，因此您只能更改食物的布尔值。然后，你的ng-show只是绑定在这个布尔值上。

AngularJS嵌套ng-repeat点击＆amp;显示隐藏

我的代码

应该发生什么

问题

可能的解决方案

的jsfiddle

1 个答案: