After the initial call to get the list of items (see below), I need get select the first item and get more details from my database. So after the items load into my select input I need to :
itemID
to DB to fetch the details of that item.How can I do all of this within my initial page load?
<!DOCTYPE html>
<html>
<head>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
<script>
var IM_Mod_app = angular.module('IM_ng_app', []);
IM_Mod_app.controller("IM_Ctrl", function ($scope, $http) {
var PlaId = "DFC";
$http({
method: 'GET',
url: 'http://xxx/api/ItemMaintenance/GetAllFilteredItems',
params: { PlaId: PlaId }
}).then(function successCallback(response) {
$scope.items = response.data;
}, function errorCallback(response) { });
});
</script>
</head>
<body ng-app="IM_ng_app">
<table ng-controller="IM_Ctrl">
<tr>
<td>
@*<select ng-model="itm" size="10" ng-options="itm.ITEM_ID for itm in items" ng-class="{selected: $index==0}" ng-change="onItemSelected(itm.ITEM_ID)">*@
@*<select ng-model="itm" size="10" ng-options="itm.ITEM_ID for itm in items track by itm.ITEM_ID" ng-selected="$first" >*@
<select ng-model="itm" size="10" ng-options="itm.ITEM_ID for itm in items track by itm.ITEM_ID" ng-init="items[0].ITEM_ID">
<option value="" ng-if="false"></option>
</select>
</td>
</tr>
</table>
</body>
</html>
Your ng-init
isn't working as you expect because your array does not have any data when the page loads. Instead, it has to complete the $http
call before any of the data is available. This just means that you need to finish your work when your $http
call comes back, (in the .then
).
Your updated AJAX call might look like this
$http({
method: 'GET',
url: 'http://xxx/api/ItemMaintenance/GetAllFilteredItems',
params: { PlaId: PlaId }
}).then(function successCallback(response) {
$scope.items = response.data;
//Initial the select box
$scope.itm = $scope.items[0];
//Get the details
getSelectedItemDetails();
}, function errorCallback(response) { });
function getSelectedItemDetails() {
$http({}) //whatever API endpoint to get the details
.then(function (response) {
// do something with the data. Maybe extend $scope.itm?
})
}
Moving forward, I discourage using ng-init
. Instead, just initialize the value of your variables in your javascript. Because of angular's two-way binding, any updates to the value from the javascript will make it to the HTML.