I have set up a newsfeed REST API to pull news items, along with a free text instant search feature.
Now, I am looking to incorporate a dropdown list search filter to allow users to filter news by author. How can I integrate a dropdown filter in a similar way to the free text search within the ng-repeat to filter results by author?
Check out this JSFiddle for reference.
app.js:
/* Newsfeed API Call */
var app = angular.module('newsFeed', [])
.controller('Newsfeed', function($scope, $http) {
$http.get('https://newsapi.org/v1/articles?source=the-next-web&sortBy=latest&apiKey=6ddf8d3cc8a54cc0abf89ad7d685da54').
then(function(response) {
$scope.news = response.data;
console.log(response.data.articles);
});
});
index.html:
<div class="container">
<br/>
<form>
<div class="col-md-6">
<h2>Newsfeed</h2>
<br/>
<div class="form-group">
<input type="text" class="form-control" ng-model="searchText" name="search-news" id="search-news" placeholder="Search for news">
</div>
<div class="form-group">
<select class="custom-select" ng-controller="Newsfeed">
<option selected>Filter by Author</option>
<option ng-repeat="n in news.articles | filter:searchAuthor | unique: 'author'" value="1">{{n.author}}</option>
</select>
</div>
</div>
</form>
<div ng-controller="Newsfeed">
<div class="card" style="width: 20rem;" ng-repeat="n in news.articles | filter:searchText | filter:searchAuthor">
<img class="card-img-top img-responsive" src="{{n.urlToImage}}" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">{{n.title}}</h4>
<p class="card-text"> {{n.description | cut:true:100:' ...'}}</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>