I am a beginner with Ionic and I'm attempting to dynamically add a list of items. I have a local JSON file and a button in my default dash.html. This button, when clicked, reads the barcode and checks if the number is available in the local JSON file. The data is then sent to the next page via app.js as shown below.
Controller.js
$scope.scanBarcode = function() {
$cordovaBarcodeScanner.scan().then(function(imageData) {
// alert(imageData.text);
if(imageData.text.length!=0){
console.log("Barcode Format -> " + imageData.format);
console.log("Cancelled -> " + imageData.cancelled);
var alertPopup = $ionicPopup.alert({title: imageData.text});
alertPopup.then(function(res) {
$state.go('tablelist',{title: imageData.text});
});
} else {
alert("Not captured properly. Try again");
}
},
function(error) {
console.log("An error happened -> " + error);
});
};
app.js
.state('tablelist', {
url: '/tablelist/:title',
views: {
'menuContent': {
templateUrl: 'templates/tablelist.html',
controller: 'TableCtrl'
}
}
})
After receiving the data in $stateParams, I can compare and add it on the next page.
.controller('TableCtrl', function($scope,$ionicPopup, $cordovaBarcodeScanner, $http, $stateParams) {
$scope.users = [];
$scope.barData;
$http.get("data/menulist.json").success(function(response){
$scope.barData=$stateParams;
for(var i=0; i<response.length; i++){
if($scope.barData.title==response[i].barcode){
$scope.users.push(response[i]);
}
}
});
$scope.scanBarcode = function() {
$cordovaBarcodeScanner.scan().then(function(imageData) {
if(imageData.text.length!=0){
$http.get("data/menulist.json").success(function(response){
for(var i=0; i<response.length; i++){
if(imageData.text==response[i].barcode){
$scope.users.push(response[i]);
$scope.apply();
}
}
});
}else{
alert("Not captured properly. Try again");
}
},
function(error) {
console.log("An error happened -> " + error);
});
};
$scope.removeRow = function(user){
$scope.users.splice( $scope.users.indexOf(user), 1 );
};
})
In the second page, there is a button to read the barcode and add it to the same list without using SQLite.
This is my tablelist.html
<ion-content>
<button class="button button-block button-positive" ng-click="scanBarcode()">Add Product</button>
<ion-list>
<div class="bs-component" ng-controller="TableCtrl">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Qty</th>
<th>Product</th>
<th>Image</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<div ng-app>
<tr ng-repeat="user in users">
<td>
<select type="number" ng-model="quantity">
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
</select><br/>
</td>
<td>{{user.first_name}}</td>
<td><img class="td-img" src="{{user.image}}"/></td>
<td>Rs: {{user.price*quantity}}
<input type="button" value="Remove" class="btn btn-primary" ng-click="removeRow(user)"/>
</td>
</tr>
</div>
</tbody>
</table>
</div>
</ion-list>
</ion-content>
The data is successfully added to the list, but it doesn't update when I use $scope.apply() inside or outside the loop.
Could someone assist me in resolving this issue? Many have suggested that $scope.apply() should work, but it doesn't seem to be helping. Thank you in advance.