AngularJS 嵌套 ng-repeat 点击 & 显示/隐藏答案

【问题标题】：AngularJS nested ng-repeat click & show/hideAngularJS 嵌套 ng-repeat 点击 & 显示/隐藏
【发布时间】：2015-08-05 12:36:15
【问题描述】：

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

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

我的代码

我的 HTML 只是 2 ng-repeats，我的目标是能够将项目添加到第二个（嵌套）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 中（该逻辑未显示）。

问题

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

可能的解决方案

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

jsFiddle

Here's a jsFiddle 与当前无法正常运行的代码。

【问题讨论】：

标签： javascript angularjs foreach angularjs-scope angularjs-ng-repeat

【解决方案1】：

有分叉的Fiddle

我只做了一些改动。事实是您将ng-show 与控制器中的单个变量绑定。这是向我展示全部或向我展示任何可能性。所以修复它，你必须在你的食物项中绑定它，而不是在控制器本身中。

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 只是绑定在这个布尔值上。

【讨论】：