1
更新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')
});
}
};
}
なぜ$ scope.clear（）を呼び出しますか？ –
@MarcusH私のコードをもっと表示するために投稿を編集しました。私は$ scope.clear（）を使用します。なぜなら、2番目のフォームにはテキスト入力があり、$ scope.clear（）はアイテムを追加した後でテキストフィールドをクリアすることができます。 –