Кнопки HTML для фильтрации элементов; уже имеют функционирующую панель поиска

#html #button #onclick #mean-stack

#HTML #кнопка #onclick #имеется в виду-стек

Вопрос:

Я работаю над веб-приложением, которое предназначено для хранения спортивных карточек, и у нас уже есть функционирующая панель поиска. Чтобы упростить работу пользователя, мы хотим добавить кнопки под панелью поиска, которые будут фильтровать спортивные карточки по их виду спорта. В то время как вы могли бы просто выполнить поиск по «бейсболу», и это привело бы к тому же самому… клиент хочет определенный внешний вид.

Вот наша панель поиска:

 <div class="col-md-12">
    <div class="input-group" id="searchBar">
        <span class="input-group-addon" id="sizing-addon1"><span class="glyphicon glyphicon-search"></span></span>
        <input type="text" class="form-control" placeholder="Search" ng-model="query"/>
    </div>
  </div>
  

И наша таблица:

 <div class="grid-container">

                <div class="grid-item" ng-repeat="listing in listings | filter:query" >{{listing.playerName}}, {{listing.playerTeam}}
                <br>
                <br>
                <button ng-click="deleteListing(listing._id)">Remove</button>
                <button ng-click="addToCart(listing._id)">Add to cart</button>
                <button ng-click="showDetails(listing._id)" data-toggle="modal" data-target="#exampleModal2">Details</button>
                </div>
        </div>
  

У меня просто возникают проблемы с выяснением, что именно должна делать кнопка. Есть ли способ просто жестко запрограммировать ввод при нажатии кнопки? Нужно ли мне будет написать новую функцию для фильтрации элементов по типу спорта?