AngularJS嵌套ng-repeat单击并显示/隐藏

Question

过去几天，我已经对该主题进行了大量阅读和研究，并找到了一些不错的答案，但是对于某些答案，我质疑性能和必要性。

我的问题与嵌套ng-repeat范围有关。 我想知道实现将项目添加到嵌套的foreach的“添加项目”方案的最佳方法是什么。

我的密码

我的HTML只是2 ng-repeat ，我的目标是能够向第二个（嵌套的） 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>

我的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;
    };
});

应该发生什么

常规工作流程是用户单击“ 添加新”按钮，它显示带有“保存”按钮的文本框。 文本框和按钮将位于父foreach中。 一旦用户保存了该项目，它将被添加到嵌套的foreach中（该逻辑未显示）。

问题

问题是，当我单击“添加新食物”（应该只显示其中一个文本框和保存按钮）时，所有文本框都会显示。 如何确保正确“确定范围”，并且仅显示该父级中的文本框/按钮？

可能的解决方案

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

jsFiddle

这是一个jsFiddle ，其中包含当前无法正常运行的代码。

Answer 1

有分叉的小提琴

我做了几处更改。 事实是您将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只是绑定到此布尔值上。