Привет. Имея некоторые проблемы с $ routeParams, у меня есть куча данных json, которые отлично отображаются на главной странице, я хочу просмотреть больше деталей, когда нажимаю на учетную запись, но я получаю ошибку dupes в dev консоль, я понятия не имею, почему, потому что я не могу найти дуплейсов, прошло много времени с тех пор, как я занимался разработчиками внешнего интерфейса, но это немного подработка на работе.
Я попытался отследить по $ index, который также не работает, но, конечно, если бы были дубликаты, он не загрузился бы на первую страницу?
var app = angular.module('xxxApp', ['angular.filter', 'ngRoute', 'ngResource']);
//Global Variables
var AccountsApi = 'http://blah';
app.config(function($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('!');
$routeProvider
.when("/xx2",
{
templateUrl: "assets/js/angular/templates/xx2.html"
})
.when("/xx2/:account",
{
templateUrl: "assets/js/angular/templates/xxInfo.html",
controller: "ShowCtrl"
})
.otherwise(
{
redirectTo: "/"
});
});
//Accounts
app.controller('XxxCtrl', function($scope, $http) {
$http.get(AccountsApi).then(function (response) {
$scope.query = "";
$scope.data = response.data.Accounts;
$scope.account_details = [];
$scope.overlayClass = "displayNone";
$scope.clickMe = function(item) {
$scope.showAccountInfo = item;
$scope.overlayClass = "display";
};
$scope.closeMe = function(item) {
$scope.showAccountInfo = false;
$scope.overlayClass = "displayNone";
};
angular.forEach(response.data, function(d, index){
angular.forEach(d.account_details, function(account_detail, index) {
$scope.account_details.push(account_detail);
})
})
$scope.account = response.data;
});
});
app.controller('ShowCtrl', function($scope, $routeParams, $http) {
$scope.accountInfo = $routeParams.account;
console.log($scope.accountInfo)
// });
});
Шаблоны
<!--Main Template -->
<div class="container">
<div class="row">
<div class="col-md-12">
<table class="table table-hover">
<thead>
<div class="table-header">
<p> Accounts<br />
<span>All Accounts</span>
</p>
</div>
<tr>
<th scope="col">Account Name</th>
</tr>
</thead>
<input class="form-control mr-sm-2" type="search" ng-model="query.account" placeholder="Search" aria-label="Search">
<tr ng-repeat="a in data" ng-cloak>
<td><a href="#!/xx2/{{ a.account }}">{{ a.account}}</a></td>
<tr colspan="3" ng-repeat="d in a.account_details">{{ d.instance_id}}</td>
</tr>
</table>
</div>
</div>
<!--details templat -->
<div class="container">
<div class="row">
<div class="col-md-4 accountDetailsContainer" ng-repeat="d in accountInfo">
<div class="accountContainer" ng-class="{'backgroundRed' : d.instance_state == 'stopped'}">
<ul>
<li><span>Instance ID: </span> {{ d.instance_id }}</li>
<li><span>Instance Name:</span>{{ d.instance_name }}</li>
<li><span>Instance Type: </span>{{ d.instance_type }}</li>
<li><span>Instance State: </span>{{d.instance_state}}</li>
<li><span>Image ID: </span>{{d.image_id}}</li>
<li><span>Public IP: </span>{{d.public_ip}}</li>
<li><span>Private IP: </span>{{d.private_ip}}</li>
<li><span>Platform: </span>{{d.platform}}<i ng-class="{'linux' : d.platform == 'Linux', 'windows' : d.platform == 'windows' }"></i></li>
<li><span>Uptime: </span>{{d.uptime}}</li>
<li><span>Region: </span>{{d.region}}</li>
<li><span>Data Centre: </span>{{d.data_centre }}</li>
<li ng-repeat="v in d.volumes"><span>Volumes: </span> {{ v.volume_id }}</li>
</ul>
</div>
</div>
</div>