帶有動態功能圖標的AngularJS搜索輸入框
[英]AngularJS search input box with dynamic and functionable icons
問題描述
我正在學習AngularJS，實際上是有一個搜索框，在該框內，我需要三個圖標（放大鏡，十字形和微調框）。 第一個實例是我希望在輸入框為空時顯示magnifineglass，第二個實例是我希望在用戶將一些字符輸入到輸入框中並且搜索通過數組進行輸出時出現微調框搜索（現在只是使用計時器），一旦返回可能的搜索，我希望“ x”出現在第三個實例中，當單擊該按鈕時，它將清除該字段並重新開始。
這是我到目前為止的內容：
<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>
小提琴 -我無法使格式在表格上正常工作，所以我只是將其余內容放在小提琴中。
我還嘗試在此處舉一個簡短的“空白區域”示例。
我正在努力的是我可以用文本（outputText）表示圖標，但是我不確定如何用圖標替換它，並將它們放在輸入框中並使用angular。
在過去的幾個小時中，我一直在為它提供幫助，對此我將給予極大的幫助，我覺得我可以分別完成這三個步驟，但是將這三個步驟組合在一起是很棘手的，而且我似乎越來越困惑。
謝謝，約翰
2 個解決方案
解決方案1
0 2016-08-08 13:46:38
在HTML中使用：
<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>
在控制器中：
// initialise searchIcon with magnifying glass
$scope.searchIcon = "glyphicon-search";
在search（）函數中：
$scope.searchIcon = "glyphicon-refresh spinning";
在clear（）函數中：
$scope.searchIcon = "glyphicon-search";
更新的提琴手 ：對於演示，我使用了ng-click圖標，也可以在輸入標簽上使用ng-keyup，ng-blur
解決方案2
0 2016-08-08 13:53:01
在angular中，您可以使用ng-show和ng-key down等指令來實現。
這里
<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;
}
}])
同一頁面上的AngularJS動態搜索框
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.