Angularjs ngRepeat不'；当$scope更新时，不会更新_Angularjs

Angularjs ngRepeat不'；当$scope更新时，不会更新

angularjs

Angularjs ngRepeat不'；当$scope更新时，不会更新,angularjs,Angularjs,更新2：我发现了问题。这是我的数据。在我收到数据后，我试图错误地访问它。我应该用数据。数据而不是数据更新：我发现以下代码似乎阻止我在它之后运行任何东西： $scope.items.push({ id : data.item.id, item : data.item.item, qty : data.it

更新2：我发现了问题。这是我的数据。在我收到数据后，我试图错误地访问它。我应该用数据。数据而不是数据

更新：

我发现以下代码似乎阻止我在它之后运行任何东西：

$scope.items.push({
                                id : data.item.id,
                                item : data.item.item,
                                qty : data.item.qty,
                                type : data.item.type,
                                type_name : data.item.type.type_name,
                                done : data.item.done
                            });

单击add按钮时，将在数据库中创建一个新项。但是，在我进行硬刷新之前，ngRepeat不会更新。如何在按下“添加”按钮后立即更新页面

//index.html

<body ng-controller="ShoppingListController">
    <button type="button" class="small button" ng-disabled="!goodToGo()" ng-click="insert()">
        <i class="fa fa-plus"> Add</i>
    </button>

<form id="addForm" accept-charset="utf-8">
                <div class="row">
                    <div class="column">
                        <span class="spanLabel" ng-show="!minimumCharactersMet()">You need at least {{ howManyMoreCharactersNeeded() }} characters more.</span>
                        <span class="spanLabel" ng-show="isNumberOfCharactersWithinRange()">Remaining characters: {{ howManyCharactersRemaining() }}</span>
                        <span class="spanLabel warning" ng-show="anyCharactersOver()">{{ howManyCharactersOver() }} characters too many</span>
                    </div>  
                </div>

                <div class="row">
                    <div class="large-8 columns">
                        <input 
                        type="text" 
                        name="item" 
                        placeholder="Item" 
                        ng-model="item"
                        ng-trim="false">
                    </div>


                    <div class="large-2 columns">
                        <input 
                        type="text" 
                        name="qty" 
                        placeholder="Qty/Weight"
                        ng-model="qty"
                        ng-trim="false">
                    </div>


                    <div class="large-2 columns">
                        <select 
                        name="type"
                        ng-model="type">
                            <option value="{{ type.id }}" ng-repeat="type in types">{{ type.name }}</option>
                        </select>
                    </div>
                </div>

                <div class="row">
                    <div class="column">
                        <div class="show-for-medium-up">
                            <div class="flr">
                                <button type="button" class="small button primary" ng-click="print()">
                                    <i class="fa fa-print"> Print List</i>
                                </button>

                                <button type="button" class="small button alert" ng-click="remove()">
                                    <i class="fa fa-time"> Clear Completed</i>
                                </button>
                            </div>

                            <button type="button" class="small button" ng-disabled="!goodToGo()" ng-click="insert()">
                                    <i class="fa fa-plus"> Add</i>
                            </button>

                            <button type="button" class="small button secondary" ng-click="clear()">
                                    <i class="fa fa-ban"> Clear Entry</i>
                            </button>
                        </div>

                        <div class="show-for-small-only">
                            <ul class="button-group even-4">
                                <li>
                                    <button type="submit" class="small button" ng-disabled="!goodToGo()">
                                        <i class="fa fa-plus"></i>
                                    </button>
                                </li>
                                <li>
                                    <button type="submit" class="small button secondary" ng-click="clear()">
                                        <i class="fa fa-ban"></i>
                                    </button>
                                </li>
                                <li>
                                    <button type="button" class="small button primary" ng-click="print()">
                                        <i class="fa fa-print"></i>
                                    </button>
                                </li>
                                <li>
                                    <button type="button" class="small button alert" ng-click="remove()">
                                        <i class="fa fa-time"></i>
                                    </button>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </form>

    <form id="items">
        <div class="row" ng-repeat="item in items track by item.id" ng-class="{ 'done' : item.done == 1 }">
            <div class="small-8 columns itemName">
                <label for="item-{{ item.id }}">
                    <input type="checkbox" name="item-{{ item.id }}" id="item-{{ item.id }}" ng-model="item.done" ng-true-value="1" ng-false-value="0" ng-change="update(item)">
                    {{ item.item }}
                </label>
            </div>

            <div class="small-2 columns itemQty">
                {{ item.qty }}
            </div>

            <div class="small-2 columns itemType">
                {{ item.type_name }}
            </div>
        </div>
    </form>
</body>

理想情况下，您不必显式调用$scope.apply作为角度摘要周期的一部分。但是，在您的例子中，我看到了

$scope.clear（）

，这在这里没有任何意义。您可以删除该行，改为使用$scope.apply（），并查看更改的模型是否反映在视图中

这是一个关于角度消化循环的例子，你可能想参考一下

如果可行，请尝试以下操作：

app.controller('ShoppingListController', ['$scope', '$http', '$log', 'helperFactory', function($scope, $http, $log, helperFactory) {

    $scope.clear = function() {
        $scope.item = '';
        $scope.qty = '';
    };

    $scope.insert = function() {
        if ($scope.goodToGo()) {
            var thisData = 'item=' + $scope.item; 
            thisData += '&qty=' + $scope.qty; 
            thisData += '&type=' + $scope.type;
            $http({
                method : 'POST',
                url : urlInsert,
                data : {
                    'item' : $scope.item,
                    'qty' : $scope.qty,
                    'type' : $scope.type
                }
            })
            .then(function(data) {
                if (_recordAddedSuccessfully(data)) {
                    $scope.items.push({
                        id : data.data.item.id,
                        item : data.data.item.item,
                        qty : data.data.item.qty,
                        type : data.data.item.type,
                        type_name : data.data.item.type.type_name,
                        done : data.data.item.done
                    });

                    $scope.apply();
                    $scope.item='';
                    $scope.qty='';
                    $scope.type='';
                }
            }, function(data, status, headers, config) {
                throw new Error('Something went wrong with inserting record')
            });
        }
    };
}

理想情况下，您不必显式调用$scope.apply作为角度摘要周期的一部分。但是，在您的例子中，我看到了

$scope.clear（）

，这在这里没有任何意义。您可以删除该行，改为使用$scope.apply（），并查看更改的模型是否反映在视图中

这是一个关于角度消化循环的例子，你可能想参考一下

如果可行，请尝试以下操作：

app.controller('ShoppingListController', ['$scope', '$http', '$log', 'helperFactory', function($scope, $http, $log, helperFactory) {

    $scope.clear = function() {
        $scope.item = '';
        $scope.qty = '';
    };

    $scope.insert = function() {
        if ($scope.goodToGo()) {
            var thisData = 'item=' + $scope.item; 
            thisData += '&qty=' + $scope.qty; 
            thisData += '&type=' + $scope.type;
            $http({
                method : 'POST',
                url : urlInsert,
                data : {
                    'item' : $scope.item,
                    'qty' : $scope.qty,
                    'type' : $scope.type
                }
            })
            .then(function(data) {
                if (_recordAddedSuccessfully(data)) {
                    $scope.items.push({
                        id : data.data.item.id,
                        item : data.data.item.item,
                        qty : data.data.item.qty,
                        type : data.data.item.type,
                        type_name : data.data.item.type.type_name,
                        done : data.data.item.done
                    });

                    $scope.apply();
                    $scope.item='';
                    $scope.qty='';
                    $scope.type='';
                }
            }, function(data, status, headers, config) {
                throw new Error('Something went wrong with inserting record')
            });
        }
    };
}

我发现了问题。这是我的数据。在我收到数据后，我试图错误地访问它。我应该使用data.data而不是data。

为什么要调用$scope.clear（）@MarcusH我编辑了我的文章以显示更多的代码。我使用$scope.clear（）是因为有第二个表单包含大量文本输入，$scope.clear（）允许在添加项后清除文本字段@MarcusH我编辑了我的文章以显示更多的代码。我使用$scope.clear（）是因为有第二个表单包含大量文本输入，$scope.clear（）允许在添加项目后清除文本字段。我编辑了文章以显示更多代码。实际上，提交了一堆文本字段。添加项后，我使用清除（）将字段变为空。您可能希望尝试在$scope.apply（）之后清除字段。如果可以的话，试试看。我发现我的$scope.items.push（{…}）有问题。由于某种原因，它会阻止任何代码在运行后运行。我已更新了答案，请检查它是否有效。我编辑了我的帖子以显示更多代码。实际上，提交了一堆文本字段。添加项后，我使用清除（）将字段变为空。您可能希望尝试在$scope.apply（）之后清除字段。如果可以的话，试试看。我发现我的$scope.items.push（{…}）有问题。由于某种原因，它会阻止任何代码在运行后运行。我已经更新了答案，请检查它是否有效。