AngularJS 输入更改重置答案

【问题标题】：AngularJS input change resetAngularJS 输入更改重置
【发布时间】：2018-01-11 01:51:30
【问题描述】：

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

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

提前致谢。

a = $范围

    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>

【问题讨论】：

你为什么在 Angular 中使用 jquery？
这样你就可以看到我的意思是哪个 div
当有原生的 angularjs 方法来完成相同的事情时，不建议将 Jquery 代码与 angularjs 混合。

标签： javascript jquery angularjs search input

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我认为您需要在a.cleanSearch 中触发您的a.change 函数以再次检查是否输入了某些内容。

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

【讨论】：

【解决方案3】：

您可以使用 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>

【讨论】：