angularjs - 清除 x 图标使用 angularjs 解决问题

Question

我需要 x 图标来删除输入字段值1. 当用户键入任何内容时，将显示“x”图标

1. 如果输入框中没有可用的值，x 将被隐藏

2. 当输入框中的值可用并且焦点移出输入框时，我们需要隐藏 x 图标并聚焦，我们需要再次显示 x 图标。

当我们在输入框中添加 ng-blur="count = !count"(注意，如果输入有值我需要隐藏 x)时，我的期望将失败。

代码:

<span ng-show="name && count" ng-click="name=''" style="position: absolute;left: 203px;cursor;pointer;">X</span>
Name: <input ng-model="name" ng-focus="count = !count" ng-init="count=false" >
<p>{{count}}</p>

谁能帮我解决这个问题

Answer 1

jsfiddle 有问题。下面的代码片段(从您的问题中复制粘贴)工作正常。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name="";
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

<span ng-show="name && count" ng-click="name=''" style="position: absolute;left: 203px;">X</span>

Name: <input ng-model="name" ng-focus="count = !count" ng-init="count=false" ng-blur="count = !count">

<p>{{count}}</p>
</div>