更新2：我发现了问题。这是我的数据。收到数据后，我试图错误地访问它。我应该使用data.data而不是数据。
更新
我发现以下代码似乎阻止我在它之后运行任何东西：
$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
});
单击“添加”按钮时，将在数据库中创建一个新项目。但是，在我进行硬刷新之前，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>
// myApp.js
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.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
});
$scope.clear();
}
}, function(data, status, headers, config) {
throw new Error('Something went wrong with inserting record')
});
}
};
}
答案 0 :(得分：0)
理想情况下，您不必将$ scope.apply明确地称为Angular摘要周期的一部分。但是，在你的情况下，我看到$scope.clear()这里没有任何意义。您可以删除该行并使用$ scope.apply（）来查看您所更改的模型是否在视图中反映。
以下是link，其中讨论了您可能想要引用的角度摘要周期。
如果有效，请尝试以下内容：
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')
});
}
};
}
答案 1 :(得分：0)
我发现了问题。这是我的数据。收到数据后，我试图错误地访问它。我应该使用data.data而不是数据。