更新

Question

我一直在尝试在文本框中创建一个清晰的图标。

我的代码段将在以下内容中执行：

最初清除图标已隐藏
当我们在文本框中输入任何内容时，如果文本框处于焦点并且文本框中有一些值，则会显示清除图标。
如果有人点击清除图标，它将清除相应的文本框内容。

简单地说，我想在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 demo

怎么会这样呢？

我很高兴接受任何有关此事的建议？

Answer 1

这是我用于我的应用程序......

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>

Answer 2

这是DOM操作，它与任何共享的＆＃34;变量＆＃34;都没有对应，这意味着没有有效的方法来处理角度。这只是不必要的。

您可以使用jQuery执行此操作，但是因为您希望使用angularJS保持整洁，您应该将代码放在指令中。

指令：

myApp.directive('myDirective', function ()
{
    /*
        I'm only adding a link in the return, however you want to be putting the whole element inside a directive to keep it tidy.
        Look into how to use directives.
    */
    return {
        link: function (scope, element, attrs)
        {
            $(document).ready(function()
            {
                $('#clear-text').click(function()
                {
                    $('#text-box').val("");
                })
            });

        }
    }
});

这里有一个关于如何使用jQuery（我没有时间用角度设置它）的小提琴 - http://jsfiddle.net/4oL928pe/

Answer 3

大家好，我能够实现我想要的目标：）

所以这是实现我想要的代码

HTML：

<div ng-controller="MyCtrl">
  <input type="text" ng-model="userId" ng-change="clearIconToggle('userId')">
  <span ng-show="userIdClear" ng-click="clearText('userId')">X</span>

  <input type="text" ng-model="passwd" ng-change="clearIconToggle('passwd')">
  <span ng-show="passwdClear" ng-click="clearText('passwd')">X</span>

  <input type="text" ng-model="dob" ng-change="clearIconToggle('dob')">
  <span ng-show="dobClear" ng-click="clearText('dob')">X</span>

</div>

JS：

var app=angular.module("myApp",[]);
app.controller("MyCtrl",["$scope",function($scope){
  $scope.userIdClear="false";
  $scope.passwdClear="false";
  $scope.dobClear="false";
  $scope.clearIconToggle=function(param){

    if($scope[param].length)
      $scope[param+'Clear']=true;
    else
      $scope[param+'Clear']=false;
  };
  $scope.clearText=function(param){
    $scope[param]='';
    $scope.clearIconToggle(param);
  };

}]);

您可以找到工作演示here

更新

我已经创建了一个指令，您可以通过该指令清除输入。

查看GitHub

上的clear-icon指令

Answer 4

尝试这种方式：

<div>
    <input type="text" ng-model="textField" />
    <span ng-show="textField" ng-click="textField = ''">x</span>
</div>

这里是JSFiddle演示。

在输入文本框角度方式里面清除图标

4 个答案:

更新