1
Update 2: Ich habe das Problem gefunden. Es war mit meinen Daten. Nachdem ich die Daten erhalten hatte, versuchte ich, falsch darauf zuzugreifen. Ich hätte data.data anstelle von Daten verwenden sollen.
Update:
entdeckte ich den folgenden Code, um mich zu sein scheint verhindert, nachdem es läuft alles:
$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
});
Wenn ich auf die Schaltfläche Hinzufügen klicken, wird ein neues Element wird in der Datenbank angelegt. Allerdings wird ngRepeat erst aktualisiert, wenn ich eine Aktualisierung vorgenommen habe. Wie kann ich die Seite aktualisieren, sobald ich die Schaltfläche "Hinzufügen" drücke?
// 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')
});
}
};
}
Warum rufen Sie $ scope.clear() auf; –
@MarcusH Ich habe meinen Beitrag bearbeitet, um mehr von meinem Code zu zeigen. Ich benutze $ scope.clear(), weil es ein zweites Formular mit einer Reihe von Texteingaben gibt und $ scope.clear() erlaubt, dass die Textfelder nach dem Hinzufügen eines Elements gelöscht werden. –