JSFiddle - React, Tailwind, and code Playground

by daver182

HTML

<html ng-app="app">
    <body ng-controller="main">
        <a ng-click="filters.category = ''">clear filter</a>
        <div ng-repeat="link in links | filter:filters">
            <strong>{{link.name}}</strong>
            <a ng-click="filters.category = link.category">{{link.category}}</a>
        </div>
    </body>
</html>

CSS

body { padding: 20px; }
div, a { margin: 5px; }

JavaScript

var app = angular.module('app', []);

app.controller('main', function($scope) {
    $scope.filters = { };
    
    $scope.links = [
        {name: 'Apple', category: 'Fruit'},
        {name: 'Pear', category: 'Fruit'},
        {name: 'Almond', category: 'Nut'},
        {name: 'Mango', category: 'Fruit'},
        {name: 'Cashew', category: 'Nut'}
    ];
});