javascript - Clear dropdown selection when search input is entered -
trying create proof of concept using angular right now. have working plunker if choose option dropdown display list of items $http.get( )
. have search input well, , when enter text want able make it's own $http.get( )
call , display data in same list list above. having trouble getting work together. want user able either select dropdown or search, not both.
here html:
<html> <head> <script data-require="angular.js@1.4.0-rc.0" 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 post.id 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 javascript:
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; // really, url should tell posts // because not real server, filter here $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 select, go here http://jsonplaceholder.typicode.com/comments //and display/filter emails based on search input }; });
as can see when search input entered want call search( )
function , clear select input , go ajax call , fill <li>
emails match searched.
firstly, line
$scope.search = $scope.selectpost;
overwrites search function remove line.
then, in search function can reset select element, , filter results email instead of id.
Comments
Post a Comment