Currently, I have a system in place where all articles from the database are displayed, along with a text search feature for easy navigation.
<input ng-model="searchText" placeholder="Search for articles" class="search-text">
I am utilizing this searchText to filter out relevant content within the database.
<section class="articles" ng-repeat="contentItem in content | filter:searchText">
My next goal is to implement buttons that represent categories and tags from the database. These buttons should allow users to instantly filter content based on their selections.
<span ng-repeat="category in categories">
<button ng-click="searchText = '{{category.local.name}}'" class="btn btn-primary">{{ category.local.name }}</button>
</span>
The current implementation isn't functioning as expected. However, if I manually input the categories without using ng-repeat, it works fine:
<span>
<button ng-click="searchText = 'some text'" class="btn btn-primary">Some text</button>
</span>
My main query revolves around finding an efficient way to pass both the search input and button values to the filter method effectively.
For reference, here is the complete code snippet:
<div class="container">
<h1>List of articles</h1>
<section class="search-items">
<input ng-model="searchText" placeholder="Search for articles" class="search-text">
<div class="row">
<div class="col-sm-6">
<h6>Search based on categories:</h6>
<span ng-repeat="category in categories">
<input type="button" ng-click="searchText = '{{ category.local.name }}'" value="{{ category.local.name }}" class="btn btn-primary">
</span>
</div>
<div class="col-sm-6">
<h6>Search based on tags:</h6>
<span ng-repeat="tag in tags">
<input type="button" ng-click="searchText = '{{tag.local.name}}'" value="{{ tag.local.name }}" class="btn btn-primary">
</span>
</div>
</div>
</section>
<section class="articles" ng-repeat="contentItem in content | filter:searchText">
<article class="well">
<h3>{{ contentItem.local.title }}</h3>
<p>{{ contentItem.local.content }}</p>
<span><b>Article author: {{ contentItem.local.author }}</b></span><br/>
<span class="label label-primary">{{ contentItem.local.categories.category }}</span>
<span class="label label-primary">{{ contentItem.local.tags.tag }}</span>
</article>
</section>
</div>