call input focus change for Angular ng-repeat

Question

我有几个使用过滤器搜索绑定的输入框。所以当我删除一个字符显示结果自动更新。但是我有很多输入框，我不想我的鼠标导航到每个输入和手动删除文本。

我用了一个函数来清除所有输入框中的文本

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

这会清除表单，但不会更新角搜索结果。如何让angular更新输入

中的内容?

.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>

Answer 1

不要使用jQuery更新输入框。只需将相应的模型值设置为空即可。那么你的控制器函数看起来就像这样:

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

上面的例子意味着您已经设置了像ng-model="search.companyName"这样的绑定。

Answer 2

Jquery会清除输入，但不会更新angular模型。

为了完成你的工作，你可以在angular中使用onclick函数创建一个按钮来清除输入:

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

这将调用控制器中的函数

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

这个方法将从你的角模型中清除值，就像你的输入值。