Question

我有一个简单的搜索框。当输入框不为空时，将显示删除按钮以删除框内的文本。之后，按钮应该再次消失，直到我再次在框中输入内容。

当我手动删除文本时，删除框正在消失，但是当我按下删除按钮时它不起作用。
我是否必须使用.length？我之前正在使用.value：
if ($(".form-control").value == '' || $(".form-control").value == $(".form-control").defaultValue) {

提前致谢。

a = $ scope

    a.change = function () {
        a.limit = 6;

        var x = a.search;
        if (x.length == '') {


            $(".form-inline").removeClass("isset");
        } else {
            $(".form-inline").addClass("isset");
        }
    };


    a.clearSearch = function () {
        a.search = "";
        a.limit = 6;
    };

html部分：

<input type="search" ng-change="change()" ng-model="search" class="form-control" placeholder="Labor durchsuchen...">

<div class="icon-close" ng-click="clearSearch()"></div>

Answer 1

你可以使用 ng-class 来表达你对JQuery的看法： -

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  
  $scope.formData = {};
 $scope.change = function () {
       //do anything here
    };


   $scope.clearSearch = function () {
        $scope.formData.search = "";
    };
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
  
<input type="search" ng-class="(formData.search != undefined && formData.search)?'isset':''" ng-change="change()" ng-model="formData.search" class="form-control" placeholder="Labor durchsuchen...">

<div class="icon-close" ng-click="clearSearch()"></div>
</div>

Answer 2

您应该能够删除jQuery代码并使用

<div class="icon-close" ng-click="clearSearch()" ng-show="search.length===0"></div>

Answer 3

我认为您需要在a.change内触发a.cleanSearch功能，以便再次检查是否输入了某些内容。

a.clearSearch = function () {
  a.search = "";
  a.limit = 6;
  a.change()
};

AngularJS输入更改重置

3 个答案: