Угловой 1.6 routeParams - PullRequest
       9

Угловой 1.6 routeParams

0 голосов
/ 26 апреля 2018

Привет. Имея некоторые проблемы с $ 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>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...