我一直在尝试在文本框中创建一个清晰的图标.
我的代码片段将在以下内容中执行:
简单地说,我想创建一个清晰图标的副本,该副本显示在webkit浏览器搜索框中.
当我点击清除图标时,它将清除相应的文本框.但那并没有发生
谁能弄明白我错过了什么？
HTML
<div ng-controller="clearCtrl">
<div>
<input type="text" ng-model="userModal" ng-keyup="clearIcon(true)" ng-blur="clearIcon(false)"/>
<span ng-click="clearInput()" ng-class="clearIconVar?'displayClear':'hideClear'" >x</span>
</div>
</div>
CSS
.displayClear{
cursor:pointer;
color:#38468F;
position:relative;
right:21px;
}
.hideClear{
display:none;
}
有角度的Javascript
var showApp = angular.module('myApp', [])
.controller('clearCtrl', function($scope) {
$scope.clearIconVar=false;
$scope.clearIcon = function(param){
$scope.clearIconVar=param;
};
$scope.hi="hi";
$scope.clearInput=function(){
alert("hi");
};
});
这是jsbin演示
怎么会这样呢？
我很高兴接受有关此的任何建议？
这就是我用于我的应用程序...
angular.module("sampleApp",[]).controller("sampleCtrl",function($scope){
$scope.inp="hel";
}).directive('clearIcon', ['$compile',
function($compile) {
return {
restrict : 'A',
link : function(scope, elem, attrs) {
var model = attrs.ngModel;
var template = '<span ng-click=\"clearText(\'' + model + '\')\" class="clearIcon" style="display:none;">x</span>';
elem.parent().append($compile(template)(scope));
var clearIconToggle = function(toggleParam) {
if(elem.val().trim().length)
elem.next().css("display", "inline");
else {
if(elem.next().css("display") == "inline")
elem.next().css("display", "none");
}
};
var clearText = function(clearParam) {
elem.val('');
clearIconToggle(clearParam);
};
elem.on("focus", function(event) {
clearIconToggle(model);
});
elem.on("keyup", function(event) {
clearIconToggle(model);
});
elem.next().on("click", function(event) {
elem.val('');
elem.next().css("display", "none");
});
}
}; }]);.clearIcon{
color:red;
right:20px;
position:relative;
cursor:pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="sampleApp">
<div ng-controller="sampleCtrl">
<input type="text" ng-model="inp" clear-icon/>
</div>
</body>| 归档时间： |
|
| 查看次数： |
7978 次 |
| 最近记录： |