Whenever a user clicks an icon in my list of details, I want a modal to open and display more data on that specific facet. This functionality is implemented using Angular UI's Bootstrap Directives.
Below is the current implementation of my controller:
controller('orderCtrl', function($scope, $modal, $http){
var orderModalCtrl = function ($scope, $modalInstance, $http, orders){
$http.get('json/SI1.json').success(function(data){
$scope.orders = data;
});
};
$http.get('json/current.json').success(function(data){
$scope.topLevelOverview = data;
});
$scope.open = function() {
$('body').css('overflow', 'hidden');
var modalInstance = $modal.open({
templateUrl: 'template/modal/orderModal.html',
windowClass: 'contactModal',
controller: orderModalCtrl,
backdrop : 'static',
resolve:{
orders: function (){
return $scope.orders;
}
}
});
modalInstance.result.then(function (){
$('body').css('overflow', 'scroll');
}, function(){
$('body').css('overflow', 'scroll');
});
};
});
The modal is triggered from a button within an ng repeat directive. Here is a snippet of how it looks:
<div ng-repeat="(key,overview) in order.orderDetails">
<div class="row" ng-repeat="(key, val) in overview.snippet">
<div class="span2"><p>{{val.item1}}</p></div>
<div class="span3"><p>{{val.item2}}</p></div>
<div class="span3"><p>{{val.qty}}</p></div>
<div class="span3"><p>{{val.freq | capitalize}}</p></div>
<div class="span1"><a href="" class="btn button" ng-click="open();">
<i class="fa fa-file-text fa-2x"></i></a></div>
</div>
</div>
I am looking to pass an argument that will determine the content of the GET request based on the item clicked by the user (e.g., 101, 102, 103, etc.). To achieve this, I have proposed the following approach:
<div class="span1"><a href="" class="btn button" ng-click="open(); routeTo({{val.item1}});">
<i class="fa fa-file-text fa-2x"></i></a></div>
In the controller defined earlier, we have the following code snippet:
var orderModalCtrl = function ($scope, $modalInstance, $http, orders){
$scope.routeTo = function(route){
$http.get('json/'+route+'.json').success(function(data){
$scope.orders = data;
});
};
};
While this solution appears to be functional, I believe there might be a more efficient way to achieve the desired outcome. I have attempted to research and explore resources related to $http and Angular UI for potential alternatives.