1

Ich bin in AngularJS Projekt arbeiten, ich habe einen Textbereich, die mir einiges Ergebnis auf search.I möge meinen Textbereich gelöscht werden gibt, wenn ich irgendwo auf dem Code ist page.My klickenwie der Textbereich automatisch leer wird, wenn der Benutzer irgendwo auf die Seite klickt. Angularjs, Javascript?

<input type="text" ng-model="bigdata" ng-change="ctrl.getData(bigdata);searchDataC =true;" ng-model-options="{debounce: 1000}" placeholder="Search contacts" class="search-input ip-size-roster ng-pristine ng-valid ng-touched" aria-invalid="false" style=""> 
+0

können Sie die 'ng-blur' Richtlinie mit einer Funktion zu tun, was Sie Ex.'ng-Unschärfe = "ctrl.clearData()" wollen' – FabioG

+0

@FabioG lass mich überprüfen und werde zu dir zurückkommen –

Antwort

0

Sie Verwenden Sie ng-click = "reset1()", wo Sie ein click -Ereignis durchführen möchten.

// html

<div ng-controller="MainCtrl" ng-click="reset1()"> 
    <textarea id="textarea" ng-model="txt"> 

    </textarea> 

    <div>{{txt}}</div> 

<!--<button id='btn' ng-click="txt=''">Reset textarea</button>--> 
    <button id='btn'>Reset textarea</button> 
</div> 


//js 

var app = angular.module('myApp', []); 

app.controller('MainCtrl', ['$scope', function ($scope) { 
    $scope.txt=''; 

    $scope.reset1 = function() { 
     $scope.txt = ''; 
    }; 
}]); 
+0

lass mich implementieren dann wird zurück zu dir. –

+0

Mein Motto ist Textfeld automatisch leer, wenn ich irgendwo auf der Seite klicke. Sie haben einen Klick-Knopf gedrückt. und Danke für Ihre Antwort –

0

in Html Datei

app.factory('clickAnywhereButHereService', function($document){ 
    var tracker = []; 

    return function($scope, expr) { 
    var i, t, len; 
    for(i = 0, len = tracker.length; i < len; i++) { 
     t = tracker[i]; 
     if(t.expr === expr && t.scope === $scope) { 
     return t; 
     } 
    } 
    var handler = function() { 
     $scope.$apply(expr); 
    }; 

    $document.on('click', handler); 

    // IMPORTANT! Tear down this event handler when the scope is destroyed. 
    $scope.$on('$destroy', function(){ 
     $document.off('click', handler); 
    }); 

    t = { scope: $scope, expr: expr }; 
    tracker.push(t); 
    return t; 
    }; 
}); 
app.directive('clickAnywhereButHere', function($document, clickAnywhereButHereService){ 
    return { 
    restrict: 'A', 
    link: function(scope, elem, attr, ctrl) { 
     var handler = function(e) { 
     e.stopPropagation(); 
     }; 
     elem.on('click', handler); 

     scope.$on('$destroy', function(){ 
     elem.off('click', handler); 
     }); 

     clickAnywhereButHereService(scope, attr.clickAnywhereButHere); 
    } 
    }; 
}); 

In Controller Datei

$scope.clickedSomewhereElse = function() { 
    //clear text here 
}; 
+0

Lassen Sie mich implementieren dann wird zurück zu Ihnen –

0

Wenn Sie JQuery irgendwo in Projekt verwenden, dann können Sie verwenden Dies.

<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
</head> 
 
<script> 
 
$(document).ready(function(){ 
 
$('div').click(function(){ 
 
debugger 
 
    
 
var check= $('#text').val(); 
 
if(check!=""){ 
 
$('#text').val('') 
 

 
} 
 
}); 
 
}); 
 
</script> 
 
<body"> 
 

 
<div class="table-responsive container" style="background:cyan; height:100px"> 
 
<input type="text" id="text" ng-model="bigdata" ng-change="ctrl.getData(bigdata);searchDataC =true;" ng-model-options="{debounce: 1000}" placeholder="Search contacts" class="search-input ip-size-roster ng-pristine ng-valid ng-touched" aria-invalid="false" style=""> 
 

 
    </div> 
 
    </body> 
 
    </html>

Klicken Sie auf DIV überall.

+0

Verwendung von JQuery mit angularjs ist keine gute Praxis, obwohl ich nicht verwenden, aber danke für Ihre Antwort. Wenn möglich, dann wird dies umgesetzt. Code ist genau das, was ich erwartet habe :) –

1
<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<body> 

<div ng-app="myApp" ng-controller="myCtrl"> 
<input type="text" ng-model="bigdata" ng-change="ctrl.getData(bigdata);searchDataC =true;" ng-model-options="{debounce: 1000}" placeholder="Search contacts" class="search-input ip-size-roster ng-pristine ng-valid ng-touched" aria-invalid="false" ng-blur="clear()"> 



</div> 

<script> 
var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) { 
    $scope.firstName = "John"; 

    $scope.clear = function(){ 
    $scope.bigdata=""; 
    } 
}); 
</script> 

</body> 
</html> 

Arbeits Link in w3school http://www.w3schools.com/code/tryit.asp?filename=FCK88MIMAKGW

Verwandte Themen