AngularJS search input box with dynamic and functionable icons
Question
I'm learning about AngularJS and effectively what I have is a search box, within that box I want three icons (magnifineglass, a cross and a spinner). The first instance I would like the magnifineglass to appear when the input box is empty, the second instance I would like the spinner to appear when the user has entered some characters into the input box and when the search has gone through the array to output possible searches (just using a timer for this just now) then I would like the "x" to appear in the third instance once the possible searches are returned, which when clicked will clear the field and start over.
This is what I have so far:
<div ng-app="searchDemo" ng-controller="LocationFormCtrl">
<div>
<input type="text" class="clearable magnifineglass" ng-click="search()"/>
<!--<i class="glyphicon glyphicon-refresh spinning"></i>-->
{{ outputText }}
</div>
Fiddle - I couldn't get the formatting to work correctly on the form so I simply put the rest in a fiddle.
I also tried to make a brief "clear field" example here .
What I am struggling with is that I can represent the icons with text (outputText) however I am unsure how to replace this with the icons and have them inside the input box and work with angular.
Any help would be greatly appreciated as I have been working on it for the past couple of hours and I feel as though I could do each of the three separately but bringing all three together is tricky and I seem to be getting more and more confused.
Thanks, John
2 answers
solution1
0 2016-08-08 13:46:38
In HTML use :
<input type="text" class="clearable" ng-model="searchText"/>
<i class="glyphicon" ng-class="searchIcon" ng-hide="clearEnable" ng-click="search()"></i>
<i class="glyphicon" ng-class="searchIcon" ng-show="clearEnable" ng-click="clear()"></i>
In controller :
// initialise searchIcon with magnifying glass
$scope.searchIcon = "glyphicon-search";
In search() function :
$scope.searchIcon = "glyphicon-refresh spinning";
In clear() function :
$scope.searchIcon = "glyphicon-search";
Updated Fiddle : for demo i have used ng-click on icons, you can use ng-keyup, ng-blur on input tag also
solution2
0 2016-08-08 13:53:01
In angular , you can achieve it using directives such as ng-show and ng-key down.
Here
<body ng-controller="tempC">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-search" ng-show="search"></span>
<span class="glyphicon glyphicon-pencil" ng-show="editing"></span>
<span class="glyphicon glyphicon-remove" ng-show="remove" ng-click="removeIcon()"></span>
</span>
<input type="text" class="form-control col-sm-4" placeholder="enter" ng-model="text" ng-keydown="typing()" />
</div>
</body>
angular.module('temp',[]).
controller('tempC',['$scope','$timeout',function($scope,$timeout){
$scope.remove = false;
$scope.search=true;
$scope.editing = false;
$scope.typing = function(){
$scope.search = false;
$scope.editing = true;
$timeout(operation,1000);
}
$scope.removeIcon = function(){
$scope.remove = false;
$scope.search = true;
$scope.text = '';
}
function operation(){
//perform operation
$scope.editing = false;
$scope.remove = true;
}
}])
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.