AngularJS Sucheingabefeld mit dynamischen und funktionsfähigen Symbolen

Ich lerne über AngularJS und effektiv, was ich habe, ist ein Suchfeld, in dem ich drei Symbole (magnifineglass, ein Kreuz und einen Spinner) möchte. Die erste Instanz, in der das magnifineglass erscheinen soll, wenn das Eingabefeld leer ist, die zweite Instanz, in der der Spinner erscheinen soll, wenn der Benutzer einige Zeichen in das Eingabefeld eingegeben hat und wenn die Suche durch das Array zur Ausgabe gegangen ist Suchvorgänge (ich verwende gerade einen Timer dafür), dann möchte ich, dass das "x" in der dritten Instanz erscheint, sobald die möglichen Suchen zurückgegeben werden. Wenn Sie darauf klicken, wird das Feld gelöscht und von vorne beginnen.AngularJS Sucheingabefeld mit dynamischen und funktionsfähigen Symbolen

Dies ist, was ich bisher:

<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 - ich nicht die Formatierung korrekt auf dem Formular an der Arbeit könnte so einfach ich den Rest in einer Geige setzen.

Ich habe auch versucht, eine kurze "clear field" Beispiel here zu machen.

Womit ich kämpfen muss ist, dass ich die Ikonen mit Text (outputText) darstellen kann, aber ich bin unsicher, wie man das mit den Ikonen ersetzt und sie innerhalb des Eingabefeldes hat und mit angular arbeitet.

Jede Hilfe würde sehr geschätzt werden, da ich in den letzten paar Stunden daran gearbeitet habe und ich das Gefühl habe, dass ich jedes der drei getrennt machen könnte, aber alle drei zusammenzubringen ist knifflig und ich scheine mehr zu bekommen und mehr verwirrt.

Danke, John

Quelle

2016-08-08 John107

In HTML Verwendung:

<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";

Auf der Suche() Funktion:

$scope.searchIcon = "glyphicon-refresh spinning";

In clear() funktion:

$scope.searchIcon = "glyphicon-search";

Updated Fiddle: für Demo i ng-Klick auf die Symbole verwendet haben, können Sie ng-keyup, ng-Unschärfe auf Input-Tag auch

Quelle

2016-08-08 13:46:38 Aks1357

In Winkel verwenden, können Sie es mit Richtlinien wie ng erreichen -show und ng-Taste runter.

Hier

example

 <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; 
    } 
}])

Quelle

2016-08-08 13:53:01

AngularJS Sucheingabefeld mit dynamischen und funktionsfähigen Symbolen

Antwort

Verwandte Themen