Here is the HTML code I have written.
<div class="container" ng-app="mintcart">
<div class="panel panel-default" ng-controller="categoriesctrl">
<input type="hidden" ng-model="session.sid" value="<?php echo session_id();?>"/>
<div class="panel-body">
<div class="row">
<ul class="nav nav-pills">
<?php
$i = 0;
while($i < count($list)){
$name = $list[$i]['categoryName'];
$id = $list[$i]['id'];
$normalUrl = $list[$i]['normalImageUrl'];
$hoverUrl = $list[$i]['hoverImageUrl'];
if($i == 0){
echo "<li role='presentation' class='active' ng-click='loadproducts($id)'><a href='#' >$name</a></li>";
} else {
echo "<li role='presentation' ng-click='loadproducts($id)'><a href='#''>$name</a></li>";
}
$i++;
}
?>
</ul>
</div>
</div>
</div>
</div>
Additionally, here is my JavaScript code.
var app = angular.module('mintcart',[]);
app.controller('categoriesctrl', function($scope, $http){
var auth = {};
$http({
method: 'GET',
url: baseurl + 'api/get_product_categories'
}).then(function successCallback(response) {
$scope.categories = response.data.categories;
// this callback will be called asynchronously
// when the response is available
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
$scope.loadproducts = function(item_id) {
alert($scope.session.sid);
$http({
method: 'GET',
url: baseurl + 'api/get_items_in_category_cart/' + item_id
}).then(function successCallback(response) {
$scope.items = response.data.products;
// this callback will be called asynchronously
// when the response is available
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
//$scope.Language = lang;
};
});
However, whenever the loadproducts function is executed, the alert($scope.session.sid); displays as "undefined". I am unsure why my element is not being recognized. Any assistance on resolving this issue would be greatly appreciated.