在搜索过滤器中使用 ng-model答案

【问题标题】：Using ng-model in search filter在搜索过滤器中使用 ng-model
【发布时间】：2017-01-15 00:46:02
【问题描述】：

我在表中有一个搜索过滤器，我将 ng-model 名称指定为 selectedGcode。我正在调用 ng-click =viewAccount() 以便在单击时调用该函数。但是我的控制器中的 $scope.selectedGcode 是未定义的。

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;



        }); 
    };

【问题讨论】：

我没有找到你在控制器中使用 selectedGcode 的任何地方
您好，请签入请求。几分钟前编辑过。

标签： angularjs json

【解决方案1】：

在<input> 中使用“ng-model”而不是“model”关键字来获取控制器中的值。

【讨论】：

对不起，我只使用了 ng-model。编辑时错过了。
使用 ng-change 之类的事件而不是 ng-click 可以解决问题。

【解决方案2】：

如果您想在每次输入内容时触发 viewAccount()，您应该使用 ng-change。

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

如果你想在点击时专门触发 viewAccount()，你应该使用一个按钮来代替。

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

【讨论】：

【解决方案3】：

您应该使用“ng-model”或“data-ng-model”，而不仅仅是“model="selectedGcode"” 您可以使用 ngKeyup 代替 ngClick。因为 ngClick 只会在用户点击输入表单的时候触发，而不是在它写东西的时候触发。

【讨论】：

对不起，我只使用了 ng-model。编辑时错过了。
那么问题是您正在使用 ngClick，当您第一次单击输入时，它只会被触发一次。因此，正如我之前所说，您最好使用 ngKeyup 以便在用户每次写新信时调用该函数。或者您可以将 ngChange 与 debounce 一起使用，请参阅此处stackoverflow.com/questions/22158063/…
嗨，是的，这是我的 ng-click 的问题。我想到了。谢谢你的想法。