NG-Repeat with NG-show Не работает с динамическими данными

Question

Я пытаюсь получить список клиентов и подробный просмотр для работы, но я не могу понять, как это понять. NG-init не работает и не будет ng-click, я могу заставить его работать, если он жестко закодирован, но при динамической загрузке данных он не будет работать. Идентификатор оценивает, может ли кто-нибудь указать правильный способ выполнить это.

HTML:

<div ng-controller="ClientCtrl as clients"> 
    <table class="listview"> 
     <tbody> 
      <tr ng-repeat="stuff in clients.records"> 
       <td><a ng-click="client = {{$index}}" class="client-link">{{stuff.first_name}} {{stuff.last_name}}</a></td> 
      </tr> 
     </tbody> 
    </table> 
    <div class="detailview"> 
     <div ng-repeat-start="things in clients.records " ng-if="$first"> 
      <div id="contact-{{$index}}" class="tab-pane active" ng-show="client == {{$index}}" ng-init="client = {{$index}}"> 
       <h2>{{things.first_name}} {{things.last_name}}</h2> 
      </div> 
     </div> 
     <div ng-repeat-end="things in clients.records " ng-if="!$first"> 
      <div id="contact-{{$index}}" class="tab-pane active" ng-show="client == {{$index}}" ng-init="client = {{$index}}"> 
       <h2>{{things.first_name}} {{things.last_name}}</h2> 
      </div> 
     </div> 
    </div> 
</div> 

controller.js:

function ClientCtrl($scope,$http,$interval, $rootScope){ 
    var ClientCtrlData = this; 
    $http.get("api/clients").success(function(response) { 
     ClientCtrlData.records = response.records; 
    }); 
    var promise; 
    // simulated items array 
    $scope.items = []; 
    // starts the interval 
    $scope.start = function() { 
     // stops any running interval to avoid two intervals running at the same time 
     $scope.stop(); 
     // store the interval promise 
     promise = $interval(
      function(){ 
       $http.get("api/clients").success(function(response) { 
        ClientCtrlData.records = response.records; 
        console.log("People loaded"); 
       }); 
      }.bind(this) 
      ,1000000 * 10); 
    }; 
    // stops the interval 
    $scope.stop = function() { 
     $interval.cancel(promise); 
    }; 
    // starting the interval by default 
    $scope.start(); 
    $scope.$on('$destroy', function() { 
     $scope.stop(); 
    }); 
} 


angular 
    .module('inspinia') 
    .controller('ClientCtrl',ClientCtrl) 

plnkr http://plnkr.co/edit/yzN787uL6C82Z6g6JNOq

Answer 1

Во-первых, нет необходимости использовать ng-click="client = {{$index}}", вы уже говорил, что код должен быть проанализирован угловыми, поэтому нет необходимости в угловых кронштейнах {{ }}.

Во-вторых, вам необходимо указать посетителя в пределах ng-click="client = $index" например ng-click="clients.client = $index", в противном случае угловой не знает, где искать объект.

Я также задаюсь вопросом, что нужно для ng-init? Я предполагаю, что это всего лишь макетная функциональность, потому что теперь она просто установит переменную clients.client для каждого элемента, пока она не станет последней в списке.

В любом случае, вот версия кода с фиксированным синтаксисом, вы должны быть в состоянии принять его здесь

http://plnkr.co/edit/UyKYvxpErcehizSBKaqy?p=preview

<div ng-controller="ClientCtrl as clients"> 
    <table class="listview"> 
    <tbody> 
     <tr ng-repeat="stuff in clients.records"> 
     <td> 
      <a ng-click="clients.client = $index" class="client-link">{{stuff.first_name}} {{stuff.last_name}}</a> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
    <div class="detailview"> 
    <div ng-repeat="things in clients.records "> 
     <div id="contact-{{$index}}" class="tab-pane active" ng-show="clients.client == $index" ng-init="clients.client = $index"> 
     <h2>{{things.first_name}} {{things.last_name}}</h2> 
     </div> 
    </div> 
    </div> 
</div>