Despite my extensive search on S-O, I couldn't find a solution to my particular issue. If this has been asked before, please excuse me.
My goal is to display JSON data in a modal (using UI-Bootstrap), but I'm facing difficulties. Even after trying various examples from online sources, none showed the data.
I've set up a new View for the modal window with the following code:
<div ng-controller="MainCtrl" class="modal-header">
<h3 class="modal-title">More Info</h3>
</div>
<div class="modal-body">
<p>{{user.username}}</p>
<ul>
<li ng-repeat="user in users">
<a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ user.username }}</a>
</li>
</ul>
Selected: <b>{{ user.username }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
The modal is accessed through the main.html (main view) displayed below:
<md-scroll-shrink><header sticky layout="row" layout-xs="column" class="header">
<h3 class="text-center affix-top ">User Directory</h3>
</header>
</md-scroll-shrink>
<div layout="row" layout-md="column">
<div flex>
<md-card id="card" ng-repeat="user in users">
<md-card-title>
<md-card-title-text>
<span class="md-headline">{{user.name}}</span>
<span class="glyphicon glyphicon-phone"></span>
<span class="md-subhead">{{user.email}}</span>
</md-card-title-text>
<md-card-title-media>
</md-card-title-media>
</md-card-title>
<md-card-actions layout="row" layout-align="end center">
<button ng-click="open()" class="btn btn-success">More Info</button>
</md-card-actions>
</md-card>
</div>
</div>
Finally, here's the main controller (main.js):
'use strict';
/**
* @ngdoc function
* @name peapodTestApp.controller:MainCtrl
* @description
* # MainCtrl
* Controller of the peapodTestApp
*/
angular.module('peapodTestApp')
.controller('ModalInstanceCtrl',function($scope,$uibModalInstance,UserService){
$scope.ok = function () {
$uibModalInstance.close();
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
})
.controller('MainCtrl', function ($scope,UserService,$uibModal,$log) {
this.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma',
'ngMaterial'
];
$scope.users = UserService;
$scope.animationsEnabled = true;
$scope.open = function (UserService,size) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'views/modal.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
user: function () {
return $scope.user;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
})
.service('UserService',function(){
var user = [{
// Inserted dummy JSON data to save space and obsolete lengthy content.
}];
return user;
})
By the way, an update on my previous question: I still can't get the modal to show my JSON values despite trying suggested solutions. Any additional advice would be greatly appreciated. Thank you.
UPDATE: Regrettably, I continue to face challenges displaying my JSON data in the modal. I've tested recommended fixes without success. If anyone has further suggestions, please share them. Thank you.