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指令调用函数：

states0CommercialA * rep(commercialMedExp, each = nrow(states0CommercialA))

影响特定变量的功能

 <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列表中的div内容？

1 个答案: