1
Обновление 2: Я нашел проблему. Это было с моими данными. После того, как я получил данные, я пытался получить к нему доступ неправильно. Я должен был использовать data.data вместо данных.
Update:
я обнаружил следующий код, кажется, мешает мне продолжить что-нибудь после него:
$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(), потому что есть вторая форма с кучей текстовых входов, а $ scope.clear() позволяет очищать текстовые поля после добавления элемента. –