2017-08-03 14 views
0

私は簡単な検索ボックスを持っています。入力ボックスが空でない場合、ボックス内のテキストを削除するための削除ボタンが表示されます。その後、もう一度ボックスに何かを入力するまで、ボタンは再び消えます。私は手動で削除ボックスが消えているテキストを削除AngularJS入力変更リセット

が、私は削除ボタンを押すと、その動作していません。
私は.lengthを使用する必要がありますか?私はそのように前.VALUE使用していました:
if ($(".form-control").value == '' || $(".form-control").value == $(".form-control").defaultValue) {

感謝を事前に。

= $スコープ

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> 
+3

なぜあなたは角にjqueryのを使用していますか? –

+0

だから、それは同じことを達成するために、ネイティブangularjs方法があるときangularjsでjQueryのコードを混在させることはお勧めできませんですたのdivの私は –

+0

を意味見ることができます。 –

答えて

1

あなたはjQueryを使ってやっていることについてNG-クラスを使用することができます -

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>

0

あなたはjQueryのコードをドロップすると、私はあなたがトリガする必要があると思う

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

使用することができるはずですa.changea.cleanSearchの中に何かが入力されたか、n ot。

a.clearSearch = function() { 
    a.search = ""; 
    a.limit = 6; 
    a.change() 
}; 
関連する問題