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只是綁定到此布爾值上。