Using ng-model in search filter

Question

I have a search filter in table and I given ng-model name as selectedGcode for it. I am calling ng-click =viewAccount() inorder to call the function on click. But I am getting $scope.selectedGcode in my controller as undefined.

HTML :

<table class="table table-striped">
<thead>
<tr class="myheading">
  <th class="col-sm-2"> Code
  </th>
  <th class="col-sm-2">Name
 </th>
 </tr>

  <tr>
   <th class="col-sm-2" >
<input type="text"  class="form-control" ng-model="selectedGcode" placeholder="Search" ng-click="viewAccount()" /></th>
 <th class="col-sm-2" >
<input type="text"  class="form-control"  /></th>
 <tr>

 <tbody>
<tr data-ng-repeat="data in tableData">
        <td  class ="stylethecontent" >{{ data.groupzcode}}</td>
        <td  class ="stylethecontent" >{{data.groupzname}}</td>
</tr>
</tbody>
</table>

JS:

 $scope.viewAccount = function(){

   var json = {

  "json": {
    "request": {
      "servicetype": "6",
      "functiontype": "6014",
      "session_id": $rootScope.currentSession,
           "data": {
        "shortname": $scope.selectShortName,
        "groupzcode":$scope.selectedGcode

       }
    }
  }
};

UserService.viewListAccount(json).then(function(response) {

              console.log(json);

             if (response.json.response.statuscode == 0 && response.json.response.statusmessage == 'Success')

               $scope.tableData = response.json.response.data;



        }); 
    };

i dont find anywhere you are using selectedGcode in controller — Sajeetharan, Sep 07 '16 at 10:57

score 0 · Answer 1 · answered Sep 07 '16 at 11:05

0

You should use "ng-model", or "data-ng-model", not just "model="selectedGcode"" And you can use ngKeyup instead of ngClick. Because ngClick will be triggered just when the user will click on the input form and not when it will write something.

answered Sep 07 '16 at 11:05

Robert Sandu

673
1
6
15

I am sorry , I was using ng-model only. When editing missed it . – Nicoleta Wilskon Sep 07 '16 at 11:07
Then the problem is that you are using ngClick which will be fired just once, when you first click on the input. So, as I said earlier, you better use ngKeyup in order to call the function every time the user writes a new letter. Or you can use ngChange with debounce, see here http://stackoverflow.com/questions/22158063/angular-ngchange-variant-when-user-finishes-typing – Robert Sandu Sep 07 '16 at 11:14
Hi , yes its the problem with my ng-click. I figured it out. Thanks for the idea. – Nicoleta Wilskon Sep 07 '16 at 11:20

score 0 · Answer 2 · edited Sep 15 '16 at 17:42

0

Use 'ng-model' instead of 'model' keyword in <input> to get the value in controller.

edited Sep 15 '16 at 17:42

Mr Lister

45,515
15
108
150

answered Sep 07 '16 at 11:06

Diksha Tekriwal

105
8

I am sorry , I was using ng-model only. When editing missed it . – Nicoleta Wilskon Sep 07 '16 at 11:07
Use of events like ng-change other than ng-click will solve the problem. – Diksha Tekriwal Sep 07 '16 at 11:22

Artem · Accepted Answer · 2016-09-07T11:34:03.623

If you want to trigger viewAccount() every time something is typed you should use ng-change.

<input type="text"  class="form-control" ng-model="selectedGcode" placeholder="Search" ng-change="viewAccount()" /></th>

If you want to trigger viewAccount() specifically on a click, you should use a button instead.

<input type="text"  class="form-control" ng-model="selectedGcode" placeholder="Search"/></th>
<button type="button" class="btn btn-default" ng-click="viewAccount()"></button>

Using ng-model in search filter

3 Answers3