更改列表中点击div的内容？

Question

我如何使这个工作与AngularJS？将此列表留在左侧，并且需要更改此列表中单击的中心div内容。

我使用NG-CLICK和NG-REPEAT来获取点击并从JSON生成列表。

angular.module('duall') 
 
.controller('documentationController', [ 
 
\t '$scope', 
 
\t '$http', \t 
 
\t function($scope, $http){ 
 

 
\t $scope.docs = []; 
 
\t 
 
\t $http.get('static/titles.json').success(function(doc){ 
 
\t \t $scope.docs = doc; 
 
\t }).error(function(error){ 
 
\t \t console.log(error); 
 
\t }); 
 

 

 

 
\t $scope.cliked = function(index){ 
 
\t \t $scope.item = $scope.docs[index] 
 
\t }; 
 

 
}]);

<div ng-controller="documentationController"> 
 
<div class="row"> 
 
    <div class="col s3" > 
 
    
 
    
 
    <div class="input-field col s12" >  
 
     <input id="search" type="search" ng-model="q" aria-label="filter docs"/> 
 
     <label for="search"><strong>Pesquise Algo! :)</strong></label> 
 
     <i class="material-icons prefix">search</i> 
 
    </div> 
 
    
 
    
 
     <ul class="animate-container"> 
 
     <!-- <li ng-repeat="docs in docs | orderBy:'title' | filter:q as results "> --> 
 
     <li ng-repeat="docs in docs | filter:q as results "> 
 
      <i class="material-icons tiny">search</i> 
 
      <a ng-click="cliked($index)" href="">{{docs.title}}</a> 
 
      <div class="divider"></div> 
 
      <br> 
 
     </li> 
 

 
     <li ng-if="results.length === 0"> 
 
      <strong>Nada encontrado :(</strong> 
 
     </li> 
 
     </ul> 
 
    
 
     
 
    </div> <!-- Fim col s3 --> 
 

 

 
    <div class="col s9"> 
 
    <div class="container"> 
 
     CONTENT CLICKED MUST BE HERE! 
 
    </div> 
 
    </div> 
 

 
    </div><!-- Fim col s9 --> 
 

 

 
</div><!-- fim ROW --> 
 
</div><!-- Fim Controller -->

Answer 1

在

NG点击就可以调用影响将包含要在你的容器，看看有什么变量的函数。下面的代码只是一个示例向您展示的想法：

首先在NG-重复你可以调用与NG单击功能指令：

<li ng-repeat="docs in docs | filter:q as results "> 
     <i class="material-icons tiny">search</i> 
     <a ng-click="cliked($index)" href="">{{docs.title}}</a> 
     <div class="divider"></div> 
     <br> 
    </li> 

功能，这将影响到特定的变量

$scope.cliked = function(index){ 
    $scope.item = $scope.docs[index] 
}; 

变量，你可以在良好的容器显示：

<div class="container"> 
     {{$scope.item}} 
    </div>