How to remove the entered data in the text box [Resolved]

Posted by Tsurendra690-29180 under Bootstrap on 1/31/2017 | Points: 10 | Views : 498 | Status : [Member] | Replies : 4
In the below code, i have a form with search in the input text, after typing in the text box and if click the cancel button which is in the form , it should remove the entered text, but what here is happening is it is removing entire form, any one please help me
<!DOCTYPE html>
<html>
<head>
<script>
var app = angular.module('myapp', []);
app.controller('myctrl', function ($scope) {
$scope.collectionCopy = [];
$scope.hided = false;
$scope.collection = [
{ Google: 'Dhoni', Facebook: 'Simla', Twitter: '5000' },
{ Google: 'Kohli', Facebook: 'Manali', Twitter: '15000' },
{ Google: 'Virat', Facebook: 'Rajasthan', Twitter: '35000' },
{ Google: 'Yuvraj', Facebook: 'Kerala', Twitter: '35000' },
{ Google: 'Singh', Facebook: 'Mysore', Twitter: '35000' },
{ Google: 'Murali', Facebook: 'OOTY', Twitter: '20000' },
{ Google: 'Vijay', Facebook: 'Goa', Twitter: '20000' }
];
//Object to hold user input
$scope.userInput = {};
//fetch the value and assign to UserInput variable
$scope.search = function (event) {
if (event.keyCode == 13) {
$scope.searcher();
}
}
$scope.searcher = function() {
$scope.userInput = $scope.Google;
}
angular.copy($scope.collection,$scope.collectionCopy);

$scope.hide = function()
{
$(".col2").toggle(1000);
angular.copy($scope.collection,$scope.collectionCopy);
if($scope.hided == false)
{
for(var i = 0; i < $scope.collectionCopy.length; i++) {
var obj = $scope.collectionCopy[i];

//if(listToDelete.indexOf(obj.id) !== -1) {
delete obj['Facebook'];
delete obj['Twitter'];

//}
}
$scope.hided = true;
}
else
{
angular.copy($scope.collection,$scope.collectionCopy);
$scope.hided = false;
}
}


});
</script>
</head>
<body ng-app="myapp">
<div ng-controller="myctrl">
<input type="text" class="form-control" name="search" placeholder="Enter keyword to search" ng-model="Google" ng-keyup="search($event)" style="background-color:#5b2c2c;color:white;">
<input type="button" value="Search" ng-click="searcher()">
<table class="table" border="1" style="margin:0;margin-left:90px;background-color:white;width:80%;border:5px solid green">
<thead>
<tr>
<th ng-click="hide()" class="col1"><a>Google</a></th>
<th ng-hide="hided" class="col2"><a>Facebook</a></th>
<th ng-hide="hided" class="col2"><a>Twitter</a></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in collectionCopy | filter:userInput" ng-class-even="'stripped'">
<td >{{record.Google}}</td>
<t




Responses

Posted by: Rajnilari2015 on: 2/2/2017 [Member] [Microsoft_MVP] [MVP] Platinum | Points: 50

Up
0
Down

Resolved
Solution 1:
On the Cancel Button click, in your controller do

$scope.Google = "";


Solution 2:

You can read the class name of the control by using jquery like
$('#text').attr('form-control')
and then set that to blank.


Hope that helps

--
Thanks & Regards,
RNA Team

Tsurendra690-29180, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: A2H on: 2/1/2017 [Member] [MVP] Silver | Points: 25

Up
0
Down
If possible consider posting your full code. So that we can take a look at respond to your query

Thanks,
A2H
My Blog

Tsurendra690-29180, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Tsurendra690-29180 on: 2/2/2017 [Member] Starter | Points: 25

Up
0
Down
Thanks Rajnilari

Tsurendra690-29180, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Webmaster on: 2/2/2017 [Administrator] HonoraryPlatinum | Points: 25

Up
0
Down
Dear Tsurendra690-29180

Please submit your full code in the following, so that its easy to resolve your question

Best regards,
Webmaster
http://www.dotnetfunda.com

Tsurendra690-29180, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response