Currently, I am working on my first web app using angularjs and facing an issue where the page does not update with new values once the user submits text or numbers in an input box.
For this project, I am utilizing Java8, MongoDB, angularJS, and twitter bootstrap.
HTML:
<td>
<input type="text" class="form-control" placeholder="enter bugnumber" data-ng-model="auditdata.newbugnumber">
<h4>Bug Numbers</h4>
<a href="{{bugLink(a)}}" data-ng-repeat="a in parseBug(auditdata.bugnumber) track by $index">{{a}}</a>
</td>
<td>
<button type="submit" data-ng-click="add(auditdata)" class="btn btn-danger" >Save</button>
</td>
In the HTML code above, I capture user input in ng-model=auditadata.newbugnumber. However, on the server side, it still updates the bugnumber field. The newbugnumber serves as a temporary variable to transmit the new data to the server, preventing two-way binding in AngularJS.
I've attempted to use $apply(), $watch, and digest in the JavaScript below but haven't been able to update the value in the view. Reloading the page is currently the only way the data reflects changes in the view, which is not ideal:
app.controller('listCtrl', function ($scope, $http,$route) {
$scope.isCollapsed = true;
$http.get('/api/v1/result').success(function (data) {
$scope.audit = data;
}).error(function (data, status) {
console.log('Error ' + data);
})
$scope.add= function(bugInfo) {
$http.post('/api/v1/result/updateBug', bugInfo).success(function (data) {
bugInfo.newbugnumber='';
console.log('audit data updated');
}).error(function (data, status) {
console.log('Error ' + data);
}
};
});
Update function on the server-side:
public void updateAuditData(String body) {
Result updateAudit = new Gson().fromJson(body, Result.class);
audit.update(
new BasicDBObject("_id", new ObjectId(updateAudit.getId())),
new BasicDBObject("$push", new BasicDBObject().append("bugnumber",
updateAudit.getNewbugnumber())));
}
The structure of the "bugnumber" field in the collection:
> db.audit.find({"_id" : ObjectId("5696e2cee4b05e970b5a0a68")})
{
"bugnumber" : [
"789000",
"1212"
]
}