call input focus change for Angular ng-repeat

Question

I have a several input boxes that uses filter search binding. So when i delete a character the display results automatically updates. But i have many input boxes and i dont want to navigate my mouse to each input and manually deleting text.

So what i did is have a function that clears out the text in all of the input boxes

 function clearForm() {
    $('#searchcompanyName').val('');
    $('#searchbusinessLN').val('');
... and so on

This clears out the forms but it doesnt update angular search results. How could get angular to update what is in the input

.controller('srchJobOrdersCtrl', function (Jobs, socketio) {
var vm = this;

vm.search = {
    date: '', companyName: '', businessLN: '',      
    guideName: '', guideLN: '', phoneNum: '', citizenshipNo: '',    
    totalPeople: '', cashChina: '', cashThailand: '', tourManNo: '', licensePlate: '',

    arrvDate: '',
    deptDate: '',
    arrFltNo: '',
    staying: '',
    deptNo: '',
    time: '',

    cashThailand: '',
    cashThailand: '',


};

Jobs.getJobsOrders()
    .success(function(data) {
        vm.jobOrders = data;
    });

vm.clearSearch = function() {
        vm.search = {
        date: '', companyName: '', businessLN: '',      
        guideName: '', guideLN: '', phoneNum: '', citizenshipNo: '',    
        totalPeople: '', cashChina: '', cashThailand: '', tourManNo: '', licensePlate: '',

        arrvDate: '',
        deptDate: '',
        arrFltNo: '',
        staying: '',
        deptNo: '',
        time: '',

        cashThailand: '',
        cashThailand: '',
    };
};

HTML

<label id='searchLabelT' class='searchLabel'></label>
<input type="text" class="form-control inputWidth3" placeholder="" id='searchcompanyName' ng-model='search.companyName'>
<input type="text" class="form-control inputWidth3" placeholder="" id='searchbusinessLN' ng-model='search.businessLN'>
<input type="text" class="form-control inputWidth3" placeholder="" id='searchguideName' ng-model='search.guideName'>
<input type="text" class="form-control inputWidth3" placeholder="" id='searchguideLN' ng-model='search.guideLN'>
<input type="text" class="form-control inputWidth3" placeholder="" id='searchphoneNum' ng-model='search.phoneNum'>



<tbody>
<tr ng-repeat="each in allJobsOrder.jobOrders | reverse | filter:search">
<td>{{ $index + 1 }}</td>
<td>{{ each.date }}</td>
<td>{{ each.companyName }}</td>
<td>{{ each.businessLN }}</td>
<td>{{ each.guideName }}</td>
<td>{{ each.guideLN }}</td>
<td>{{ each.phoneNum }}</td>

Show us your HTML code of the input boxes. So that would be even better to explain you. — John R
– John R, Commented Aug 15, 2015 at 9:51

dfsq · Accepted Answer · 2015-08-15 09:48:04Z

1

Don't use jQuery to update input boxes. Just set corresponding model values to empty. So your controller function will look something like this:

$scope.clearForm = function() {
    $scope.search.companyName = '';
    $scope.search.businessLN = '';
    // ... and so on
};

Above example implies that you have bindings set up like ng-model="search.companyName", etc.

answered Aug 15, 2015 at 9:48

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Photonic Over a year ago

Hi Dfsq.... i try doing this but is not clearing forms. Please see my edit post above

Photonic Over a year ago

Ive re-edit my post.... my code is really long so i had to cut it out for readable sake. Why inst when i do vm.search.companyName = ''; doesnt clear my form

Pawan B · Accepted Answer · 2015-08-15 15:01:30Z

0

Jquery clears the input but doesn’t updates the angular models .

To get your work done , you can create a button for clearing the inputs with an onclick function in angular :

<button ng-click="clearForm()">Clear</button>

This will call a function in your controller

$scope.clearForm = function() {
    $scope.search.companyName = ''; // binds to ng-model='search.companyName'
    $scope.search.businessLN = ''; // binds to ng-model='search.businessLN'
    // ... and so on
};

This method will clear values from your angular model as will as your input values.

answered Aug 15, 2015 at 15:01

Pawan B

4,6332 gold badges27 silver badges39 bronze badges

Collectives™ on Stack Overflow

call input focus change for Angular ng-repeat

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related