Angularjs 清除输入文本框内的图标

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

我的代码片段将执行以下操作：

最初，清除图标是隐藏的

当我们在文本框中键入任何内容时，如果文本框处于焦点并且文本框中有一些值，则将显示清除图标

如果有人单击“清除”图标，它将清除相应的文本框内容

简单地说，我想创建一个显示在webkit浏览器搜索框中的clear图标副本

当我点击清除图标时，它将清除相应的文本框。 但事实并非如此

谁能知道我错过了什么

HTML

角度Javascript

这是你的电话号码

怎么能这样呢

---

我很乐意接受任何有关这方面的建议？

这是一种与任何共享“变量”都不对应的DOM操作，这意味着没有有效的方法来处理angular。只是没必要

使用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一起工作的小杂烩（我没有时间用angular进行设置）

这是一个DOM操作，它不对应于任何共享的“变量”，这意味着没有有效的方法来使用angular进行操作。只是没必要

使用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一起工作的小杂烩（我没有时间用angular设置它）

嗨，过了一会儿，我就可以实现我想要的了：）

下面是我想要的代码

HTML:

您可以找到工作演示

---

更新： 我创建了一个指令，通过它可以清除输入

---

查看位于

Hi all的clear icon（清除图标）指令，过一会儿我就能实现我想要的：）

下面是我想要的代码

HTML:

您可以找到工作演示

---

更新： 我创建了一个指令，通过它可以清除输入

---

查看位于

的clear icon指令，这是我在应用程序中使用的指令

angular.module（“sampleApp”，[]）.controller（“sampleCtrl”，function（$scope）{
$scope.inp=“hel”；
}).directive（'clearIcon'，['$compile'，
函数（$compile）{
返回{
限制：“A”，
链接：功能（范围、要素、属性）{
var模型=attrs.ngModel；
var模板='x'；
elem.parent（）.append（$compile（template）（scope））；
var clearIconToggle=函数（toggleParam）{
if（elem.val（）.trim（）.length）
elem.next（）.css（“显示”、“内联”）；
否则{
if（elem.next（）.css（“display”）=“inline”）
elem.next（）.css（“显示”、“无”）；
}
};
var clearText=函数（clearParam）{
元素val（“”）；
ClearIContogle（clearParam）；
};
要素“聚焦”，功能（事件）{
ClearIContogle（模型）；
});
要素开启（“键控”，功能（事件）{
ClearIContogle（模型）；
});
elem.next（）.on（“单击”，函数（事件）{
元素val（“”）；
elem.next（）.css（“显示”、“无”）；
});
}
}; }]);
.clearcon{
颜色：红色；
右：20px；
位置：相对位置；
光标：指针；
}
这是我在应用程序中使用的


angular.module（“sampleApp”，[]）.controller（“sampleCtrl”，function（$scope）{
$scope.inp=“hel”；
}).directive（'clearIcon'，['$compile'，
函数（$compile）{
返回{
限制：“A”，
链接：功能（范围、要素、属性）{
var模型=attrs.ngModel；
var模板='x'；
elem.parent（）.append（$compile（template）（scope））；
var clearIconToggle=函数（toggleParam）{
if（elem.val（）.trim（）.length）
elem.next（）.css（“显示”、“内联”）；
否则{
if（elem.next（）.css（“display”）=“inline”）
elem.next（）.css（“显示”、“无”）；
}
};
var clearText=函数（clearParam）{
元素val（“”）；
ClearIContogle（clearParam）；
};
要素“聚焦”，功能（事件）{
ClearIContogle（模型）；
});
要素开启（“键控”，功能（事件）{
ClearIContogle（模型）；
});
elem.next（）.on（“单击”，函数（事件）{
元素val（“”）；
elem.next（）.css（“显示”、“无”）；
});
}
}; }]);
.clearcon{
颜色：红色；
右：20px；
位置：相对位置；
光标：指针；
}

尝试以下方法：

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


x

这里是演示。
请尝试以下方法：

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


x

这是演示。
您好，谢谢您的回答。我想你错过了什么。问题更新见一次。我当时不明白这个问题。看起来有两个问题，在webkit浏览器中显示图标和清除输入框的功能。对吧？这不是问题所在。我试图为每个文本框模拟像clear图标一样的搜索框，因为该搜索框依赖于浏览器，我们必须使用它，因此我将该功能应用于所有输入，如文本框、密码。请让我知道如果你有任何疑问？不，我想要一个输入框一个图标。如果我点击图标，相应的文本框值将为空。完成演示后，您可以了解我的代码片段的作用。这就是我的答案。您好，谢谢您的回答。我想你错过了什么。问题更新见一次。我当时不明白这个问题。看起来有两个问题，在webkit浏览器中显示图标和清除输入框的功能。对吧？这不是问题所在。我试图为每个文本框模拟像clear图标一样的搜索框，因为该搜索框依赖于浏览器，我们必须使用它，因此我将该功能应用于所有输入，如文本框、密码。请让我知道如果你有任何疑问？不，我想要一个输入框一个图标。如果我单击图标，相应的文本框值将为e
<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>

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

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