Question

尝试将项目添加到范围后，

我的ng-repeat没有更新。

这是我的HTML：

<div class="col-lg-12">
    <div class="panel-group" id="accordion">
    <div class="panel panel-collapse panel-default" id="topPanel">
            <div class="panel-heading" data-toggle="collapse" data-target="#top-action-panel-body">
                <h4 class="panel-title">
                    Collapsible Group Item #1
                </h4>
            </div>
            <div id="top-action-panel-body" class="panel-collapse collapse">
                <div class="panel-body">
                    <form class="ih_enterprise_api_stock_item_new form-horizontal form-stock-item-add" ng-submit="test()" ng-controller="InventoryAddCtrl" id="ihenterprise_logisticsbundle_stockItem">
                        <div class="form-group">
                                <label class="col-sm-4 control-label control-label required" for="ihenterprise_logisticsbundle_stockItem_name">Name</label>
                            <div class="col-sm-8">
                                    <input type="text" id="ihenterprise_logisticsbundle_stockItem_name" name="ihenterprise_logisticsbundle_stockItem[name]" required="required" maxlength="255" ng-model="formData.name" class="form-control form-control">
                            </div>
                        </div>
                        <div class="form-group">
                                <label class="col-sm-4 control-label control-label required" for="ihenterprise_logisticsbundle_stockItem_itemNo">Item no</label>
                            <div class="col-sm-8">
                                    <input type="text" id="ihenterprise_logisticsbundle_stockItem_itemNo" name="ihenterprise_logisticsbundle_stockItem[itemNo]" required="required" maxlength="255" ng-model="formData.itemNo" class="form-control form-control">
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4 col-md-offset-4">
                                <input type="submit" class="btn btn-success" value="Tilføj">
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-lg-12" ng-controller="InventoryListCtrl">
    <div class="panel panel-default" style="color: black; text-align: left">
        <div class="panel-heading">
            <h3>Lager liste</h3>
        </div>
        <div class="panel-body table-responsive">
            <table class="table table-condensed table-expanding">
                    </table><table class="table table-condensed table-expanding">
        <thead>
        <tr>
            <th>&nbsp;</th>
            <th>Id</th>
            <th>Created At</th>
            <th>Navn</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat-start="stockItem in stockItems" data-toggle="collapse" data-target="#stockItem_{{stockItem.id}} " class="accordion-toggle">
            <td>
                <button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button>
            </td>
            <td>{{stockItem.id}} </td>
            <td>{{stockItem.created_at}} </td>
            <td>{{stockItem.name}} </td>
        </tr>
        <tr ng-repeat-end="">
            <td colspan="6" class="hiddenRow">
                <div class="accordian-body collapse" id="package_{{stockItem.id}} ">
                    test
                </div>
            </td>
        </tr>
        </tbody>
    </table>

        </div>
    </div>
</div>

这是我的代码： App.js

'use strict';

var app = angular.module('cmfApp', [
    'ngRoute',
]);

angular.module('cmfApp.controllers', []);

InventoryRouting.js

angular.module('cmfApp').config(function($routeProvider){
    $routeProvider.
        when('/inventory', {
            templateUrl: Routing.generate('ih_enterprise_user_dashboard_inventory'),
            controller: 'InventoryListCtrl'
        })
});

InventoryController.js

angular.module('cmfApp').controller('InventoryAddCtrl', ['$scope', '$http', '$timeout', function($scope, $http, $timeout){

    $scope.submit = function() {
        var postData = {
            ihenterprise_logisticsbundle_stockItem: {
                name: $scope.formData.name,
                itemNo: $scope.formData.itemNo
            }
        }

        $http({
            method  : 'POST',
            url     : Routing.generate('ih_enterprise_api_stock_item_new'),
            data    : $.param(postData),  // pass in data as strings
            headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)
        })
        .success(function(data) {
            // the code you want to run in the next digest
                $scope.$apply(function(data){
                    $scope.stockItems = $scope.stockItems.concat(data);
                });

            //console.log($scope.stockItems);
        }).error(function(error) {
            console.log(error);
        });
    };

    $scope.test = function() {
        console.log("here");
        $scope.stockItems.push({
            id: 1000,
            name: 'potato',
            created_at: '1111'
        });
        console.log($scope.stockItems);
    }

}]);

忽略HTTP请求，我认为这是一个与HTTP相关的问题，但它似乎更为基础，因为我试图在提交时插入一个普通对象。

Answer 1

您似乎要将InventoryListCtrl实例化两次：一次进入路径定义，再次进入HTML模板。因此，当您更新stockItems数组时，它不会更新视图中使用的相同数组。

尝试从模板中删除ng-controller="InventoryListCtrl"。

这将使InventoryListCtrl成为整个HTML模板的控制器（路径定义的b / c）。 InventoryAddCtrl在模板中使用，它将继承InventoryListCtrl的范围。因此，当您从任一控制器更新$scope.stockItems时，您现在将更新同一个对象。

表单提交后查看不更新

1 个答案: