有没有办法使用 Angular 在单击按钮时显示内容？答案

【问题标题】：Is there a way to use Angular to display content onclick of a button?有没有办法使用 Angular 在单击按钮时显示内容？
【发布时间】：2018-07-14 13:01:40
【问题描述】：

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

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

【问题讨论】：

到目前为止你有什么尝试？
嗨，安德鲁，我尝试了上述方法（刚刚编辑了我的原始代码以包含我的尝试）

标签： javascript arrays angularjs

【解决方案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>

【讨论】：

你好 @Alnitak .. 谢谢，但我注意到 Show me red wines 按钮并不总是正常工作，因为它什么都不显示，然后显示所有葡萄酒。似乎是一个错误。
@Al-76 你不必发布我认为的另一个答案
@Al-76 我无法在 macOS 上的 Chrome 浏览器上复制它。
@Sajeetharan 如果该评论是针对我的，请注意，虽然我确实重用了您的 sn-p 以提高效率，但操作方法完全不同（并且更接近于 OP 的代码)。

【解决方案2】：

你可以在点击按钮时使用你想要的颜色的功能

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

这个函数列表可以像这样根据你在参数中发送的颜色过滤你的数组

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

并列出过滤后的数组

【讨论】：

【解决方案3】：

您可以通过传递带有按钮选项的参数来调用函数，并在控制器上使用 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>

【讨论】：

您在每次印刷时都覆盖$scope.wineListings 的实际内容？这不可能……
还有大量违反 DRY 原则的行为以及完全不必要的特定于数据的硬编码分支。
@Alnitak 感谢您的提醒，我已经改进了答案
@Sajeetharan 似乎有一个错误，但这几乎可以正常工作。谢谢你的帮助:)
天哪，疯狂的家伙们都失望了