Currently experimenting with Angular to develop a proof of concept. Utilizing a functional plunker where selecting an option from a dropdown populates a list of items from an $http.get( ). Additionally, there is a search input that should trigger its own $http.get( ) call and display data in the same list as above. However, integrating these features seamlessly has been challenging. Ideally, users should be able to either select from the dropdown or use the search functionality, but not both simultaneously.
The following is the html code:
<html>
<head>
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="40212e27352c21326e2a3300716e746e706d32236e70">[email protected]</a>" data-semver="1.4.0-rc.0" src="https://code.angularjs.org/1.4.0-rc.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myapp" ng-controller="MainCtrl">
<h1>Hello Plunker!</h1>
<div>
<select ng-options="post as post.id for post in allPosts" ng-model="selectPost" ng-change="select()">
<option value="">--select--</option>
</select>
<input type="text" ng-model="searchText" ng-change="search()" />
<ul>
<li data-ng-repeat="item in records | orderBy:'Name':reverse">
{{item.email}}
</li>
</ul>
</div>
</body>
</html>
And here is the Javascript snippet:
angular.module('myapp', [])
.controller('MainCtrl', function($scope, $http) {
var records;
$scope.selectPost = '';
$scope.searchText = '';
$http.get('http://jsonplaceholder.typicode.com/posts').success(function(data1) {
$scope.allPosts = data1;
$scope.total = $scope.allPosts.length;
});
$scope.select = function() {
$scope.searchText = '';
$scope.search = $scope.selectPost;
$http.get('http://jsonplaceholder.typicode.com/comments').success(function(data2) {
$scope.records = [];
data2.forEach(function(r) {
if (r && r.postId && r.postId === $scope.selectPost.id) {
$scope.records.push(r);
}
});
});
};
$scope.search = function() {
//clear the select, go here http://jsonplaceholder.typicode.com/comments
//and display/filter emails based on the search input
};
});
Upon entering text into the search input, the intention is to invoke the search( ) function, reset the select input, make another AJAX call to retrieve matching email data, and populate the <li> accordingly.