Question

将刚刚添加的项目推送到现有的重复部分很容易。

该页面显示所有类别及其产品。您可以使用Angular在页面上添加新类别或产品。

添加新的后，我想将其推送到正确的部分。这对于重复的主要部分来说很容易，但对于嵌套部分则不容易。

<script>
function ProductsController($scope, $http)
{
    $scope.addCategory = function(category)
    {
        $http.post('/categories', category);
        $scope.categories.push(category);
    }

    $scope.addProduct = function(product)
    {
        $http.post('/products', product);

        // What to do over here? 
        // $scope.categories.push(category);
        // I want this product to be added in the correct category
    }

}
</script>

<article ng-repeat="category in categories">
    <h3>{{ category.title }}</h3>

    <ul ng-repeat="product in category.product">
        <li>{{ product.name }}</li>
    </ul>

    <form ng-submit="addProduct(product)" ng-hide="toggle">
        <!-- The form -->
    </form>
    <p ng-click="toggle = !toggle">New product in this category</p>

</article>

<form ng-submit="addCategory(category)">
    <!-- The form -->
</form>

如何将新添加的产品添加到我刚添加产品的类别中？

Answer 1

您可以在调用addProduct方法时添加当前类别

HTML

<form ng-submit="addProduct(product, category)" ng-hide="toggle">
    <!-- The form -->
</form>

JS

$scope.addProduct = function(product, category)
{
    $http.post('/products', product);
    category.product = category.product || [];
    category.product.push(product);
}

Answer 2

如果您的$ scope.categories具有嵌套体系结构，为什么不使用此语法来推送：

$scope.addProduct = function(category, product)
    {
        $http.post('/products', product);
        $scope.categories[category].push(product);
    }

推送到AngularJS中的嵌套重复范围

2 个答案: