divのコンテンツをリストのクリックから変更しますか？

Question

AngularJSでこの作業を行うにはどうすればよいですか？このリストは左側にあり、中央のdivコンテンツをこのリストのクリックから変更する必要があります。

クリックを取得してJSONからリストを生成するには、NG-CLICKとNG-REPEATを使用しています。 NG-クリックで

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

あなたはあなたの容器の中に見たいものを含んでいます変数に影響を与える関数を呼び出すことができます。次のコードは、あなたのアイデアを表示するための唯一のサンプルです：特定の変数

に影響を与えます

<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> 

機能：NG-繰り返しますがNGクリックディレクティブで関数を呼び出すことができますで

ファーストあなたは良い容器に表示することができます

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

変数：

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