Question

我想在页面上显示文章列表。首先显示所有内容，但是如果用户单击某个按钮，则只会显示与该按钮相关的文章。这意味着它将查看数组中的“葡萄”，如果它是红色，则显示列表中的红酒。最好有一个按钮来显示所有默认返回初始视图的按钮。任何帮助欢迎。

<button>Show ALL Articles<button>
<button ng-click="filter('red')">Show me articles with red wines<button>
<button ng-click="filter('white')">Show me articles with white wines<button>
<button ng-click="filter('rose')">Show me articles with rose wines<button>

<ul>
    <li ng-repeat="item in wineListings | filter: filter">
        <h2>{{item.country}}</h2>
        <p>{{item.grape}}</p>
    </li>
</ul>

$scope.wineListings = [
    {
        country:"France",
        grape:"red"
    },
    {
        country:"Spain",
        grape:"red"
    },
    {
        country:"Italy",
        grape:"white"
    },    
    {
        country:"USA",
        grape:"rose"
    }
];

Answer 1

您只需在范围内拥有一个附加变量即可满足您的需要，该变量通过Angular的内置对象匹配语法作为参数传递给| filter，

wineListings | filter: { grape: selected }

var app = angular.module('testApp',[])

app.controller('testCtrl',function($scope) {
$scope.wineListings = [
    {
        country:"France",
        grape:"red"
    },
    {
        country:"Spain",
        grape:"red"
    },
    {
        country:"Italy",
        grape:"white"
    },    
    {
        country:"USA",
        grape:"rose"
    }
];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<button ng-click="selected=''">Show me all wines</button>
<button ng-click="selected='red'">Show me red wines</button>
<button ng-click="selected='white'">Show me white wines</button>
<button ng-click="selected='rose'">Show me rose wines</button>

<ul>
    <li ng-repeat="item in wineListings | filter : { grape: selected }">
        <h2>{{item.country}}</h2>
        <p>{{item.grape}}</p>
    </li>
</ul>
</body>

Answer 2

您可以通过将参数与button选项一起传递来调用函数，并使用array.filter在控制器上应用逻辑，如下所示：

演示

var app = angular.module('testApp',[])

app.controller('testCtrl',function($scope){
$scope.selectedColor;
$scope.wineListings = [
    {
        country:"France",
        grape:"red"
    },
    {
        country:"Spain",
        grape:"red"
    },
    {
        country:"Italy",
        grape:"white"
    },    
    {
        country:"USA",
        grape:"rose"
    }
];
$scope.fill = function(input){
      return input =='all'? $scope.wineListings: $scope.wineListings.filter(t=>t.grape ===input);
}
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<button ng-click="selectedColor='all'">Show me all wines</button>
<button ng-click="selectedColor='red'">Show me red wines</button>
<button ng-click="selectedColor='white'">Show me white wines</button>
<button ng-click="selectedColor='rose'">Show me rose wines</button>

<ul>
    <li ng-repeat="item in fill(selectedColor)">
        <h2>{{item.country}}</h2>
        <p>{{item.grape}}</p>
    </li>
</ul>
</body>

Answer 3

您可以使用功能，单击带有所需颜色的按钮

   <button value="Show me white wines" onClick="list('white')">

并且此函数列表可以根据您在这样的参数中发送的颜色来过滤数组

public list(String color){
  return this.wineListings.filter(wine => wine.grape === color);
}

并过滤后列出阵列

有没有一种方法可以使用Angular在单击按钮时显示内容？

3 个答案: