I am currently working with angularjs 1.6 to develop a basic application that lists groups and their respective users, but I am facing an issue in displaying the list of users using ng-view.
This is how my index.html looks like:
<!DOCTYPE html>
<html lang="en" ng-app="application">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My application</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/bootstrap-3/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/app.css">
</head>
<body>
<div ng-controller="groupctrl">
<div class="well">
<ul ng-repeat="grp in group">
<li class="link" ng-click="displayusers(grp.uuid)">{{ grp.name }}</li>
<li class="link" ng-click="displayusers(grp.uuid)">{{ grp.name }}</li>
</ul>
</div>
</div>
<div ng-view>
</div>
</body>
<script src="assets/angular.min.js"></script>
<script src="assets/angular-route.min.js"></script>
<script src="controllers/app.js"></script>
<script src="controllers/route.js"></script>
<script src="controllers/service.js"></script>
<script src="controllers/mainctrl.js"></script>
</html>app.js
var app = angular.module('application', ['ngRoute']);route.js and mainctrl.js
app.config(['$locationProvider', '$routeProvider',
function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider
.when('/', {
templateUrl: 'index.html'
})
// .when('/group', {
// templateUrl: 'group.html',
// controller: 'groupctrl'
// })
.when('/users', {
templateUrl: 'users.html',
controller: 'usersctrl'
})
.otherwise({redirectTo: '/'});
}]);
app
.controller('groupctrl', function($scope, $timeout, $location, apiService) {
$scope.hello = "hello 123";
apiService.getgroup().then(function(data){
$scope.group = data;
});
$scope.displayusers = function(idgroup){
apiService.getusers(idgroup);
$location.path('/users');
};
})
.controller('usersctrl', function($scope, $timeout, apiService) {
apiService.getusers().then(function(data){
$scope.users = data;
});
});users.html
<div ng-controller="usersctrl">
<div ng-repeat="user in users">
<div class="well text-center">
<h2>{{ user.name }}</h2>
<h5>{{ user.index }}</h5>
<button class="btn btn-success" ng-click="edit(user.index)">EDIT</button>
<button class="btn btn-danger" ng-click="delete(user.index)">DELETE</button>
</div>
</div>
</div> Thank you for any assistance!