javascript - 通过单击列表更改 div 内容？

Question

我怎样才能使它与 AngularJS 一起工作？将此列表放在左侧，需要通过单击此列表更改中心 div 内容。

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

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

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



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

}]);

<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-click 上，您可以调用一个影响变量的函数，该变量将包含您希望在容器中看到的内容。以下代码只是向您展示想法的示例:

首先，在 ng-repeat 中，您可以使用 ng-click 指令调用函数:

 <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]
};

可以在 good 容器中显示的变量:

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