一个页面中有多个 Ng-REPEAT答案

【问题标题】：Multiple Ng-REPEAT in a page一个页面中有多个 Ng-REPEAT
【发布时间】：2017-10-28 17:05:06
【问题描述】：

我的 index.html 页面上有以下代码。

<button id="showdogs">Dogs</button>
<div ng-repeat="list in cats">
<li>{{list.name}}</li>
</div>

<script>
$scope.cats = [
        {name:"cat1"},{name:"cat2"},{name:"cat3"}]
$scope.dogs = [
        {name:"Dog1"},{name:"Dog2"},{name:"Dog3"}]
</script?

我要展示

<div ng-repeat="dog in dogs">
<li>{{list.name}}</li>
</div>

当#showdogs 按钮被按下时。谁能帮助我使用 AngularJs 或 Jquery 来做到这一点？

【问题讨论】：

你的问题不清楚。

标签： jquery angularjs angularjs-ng-repeat angularjs-ng-click

【解决方案1】：

AngularJS：

您可以使用ng-show如下并显示列表：

function Controller($scope) {
   $scope.displayCats = true;
   $scope.displayDogs = false;
    $scope.cats = [{name:"cat1"},{name:"cat2"},{name:"cat3"}];
		$scope.dogs = [{name:"Dog1"},{name:"Dog2"},{name:"Dog3"}];
    
    $scope.showDogs = function(){
    	$scope.displayDogs = true;
      $scope.displayCats = false;
    };
    
    $scope.showCats = function(){
    	$scope.displayDogs = false;
      $scope.displayCats = true;
    };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app ng-controller="Controller">
    <button id="showdogs"  ng-click="showDogs();">Dogs</button>
    <button id="showcats"  ng-click="showCats();">Cats</button>
    <div ng-show="displayCats" ng-repeat="list in cats">
    <li>{{list.name}}</li>
    </div>
    <div ng-show="displayDogs" ng-repeat="list in dogs">
    <li>{{list.name}}</li>
    </div>
</div>

jQuery：

var cats = [{name:"cat1"},{name:"cat2"},{name:"cat3"}];
var dogs = dogs = [{name:"Dog1"},{name:"Dog2"},{name:"Dog3"}];

$(document).ready(function(){
	$("#showdogs").click(function(){
   $(".listDiv > ul").empty();
  	$.each(dogs,function(ind){
      $(".listDiv > ul").append("<li>"+dogs[ind].name+"</li>");
    });
  });
  $("#showcats").click(function(){
  	$(".listDiv > ul").empty();
  	$.each(cats,function(ind){
      $(".listDiv > ul").append("<li>"+cats[ind].name+"</li>");
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="showdogs">Dogs</button>
<button id="showcats">Cats</button>
<div class="listDiv">
<ul>

</ul>
</div>

【讨论】：

我发现angularjs方法很简单。我想在页面加载时显示 CATS 列表。怎么办？

【解决方案2】：

您可以使用ng-click 并在那里传递类型，然后在控制器中根据类型填充数据源。

<button id="showdogs" ng-click="showItem('dog')">Dogs</button>

$scope.showItem = function(type){
   if(type === 'dog'){
      $scope.itemList = [{name:"Dog1"},{name:"Dog2"},{name:"Dog3"}];
   }
   else if(type === 'cat'){
      $scope.itemList = [{name:"cat1"},{name:"cat2"},{name:"cat3"}];
   }
};

在html中

<div ng-repeat="item in itemList">
   <li>{{item.name}}</li>
</div>

请参阅example plnkr。

【讨论】：

这就是我需要的。谢谢你