当搜索过滤器值从javascript更改时，智能表不会更新[重复]
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了当搜索过滤器值从javascript更改时，智能表不会更新[重复]相关的知识，希望对你有一定的参考价值。
这个问题在这里已有答案：
我正在使用Angular Smart Table。当我使用st-search指令使用搜索过滤器时，当我从javascript表更改其值时，不会获得更新。这是我的代码
这是我的控制器
angular.module('myApp', ['smart-table'])
.controller('mainCtrl', ['$scope', '$timeout',
function ($scope, $timeout) {
var nameList = ['Pierre', 'Pol', 'Jacques', 'Robert', 'Elisa'];
var familyName = ['Dupont', 'Germain', 'Delcourt', 'bjip', 'Menez'];
$scope.isLoading = false;
$scope.rowCollection = [];
function createRandomItem() {
var
firstName = nameList[Math.floor(Math.random() * 4)],
lastName = familyName[Math.floor(Math.random() * 4)],
age = Math.floor(Math.random() * 100),
email = firstName + lastName + '@whatever.com',
balance = Math.random() * 3000;
return {
firstName: firstName,
lastName: lastName,
age: age,
email: email,
balance: balance
};
}
$scope.columns = ['firstName', 'lastName', 'age', 'email', 'balance'];
for (var i = 0; i < 10; i++) {
$scope.rowCollection.push(createRandomItem());
}
$scope.changeSearch = function () {
document.getElementById('firstName').value = '';
};
}
]);
这是html
<body ng-controller="mainCtrl">
<div class="table-container">
<table st-table="rowCollection" class="table table-striped">
<thead>
<tr>
<th ng-repeat="col in columns" st-sort="{{col}}">{{col}}</th>
</tr>
<tr>
<th>
<input st-search="firstName" id="firstName"
placeholder="search for firstname"
class="input-sm form-control"
type="search" />
</th>
<th colspan="4">
<input st-search placeholder="global search"
class="input-sm form-control"
type="search" />
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection">
<td ng-repeat="col in columns">{{row[col]}}</td>
</tr>
</tbody>
</table>
<button ng-click="changeSearch()">Change Search</button>
</div>
<div ng-show="isLoading" class="loading-indicator"></div>
<script src="angular.min.js"></script>
<script src="smart-table.min.js"></script>
<script src="app2.js"></script>
我按了一个按钮并在其单击方法上更改搜索过滤器值，其值更改但表不会被过滤。需要帮忙？是否可以从代码中更改搜索过滤器值？
答案
要使用按钮触发过滤器，您需要创建自定义指令。
您不应该在控制器中使用DOM操作。要操纵DOM值，您可以使用ngModel。
<input st-search="firstName" id="firstName"
placeholder="search for firstname" class="input-sm form-control"
type="search" ng-model="firstName" />
然后将您的changeSearch函数更改为：
$scope.changeSearch = function () {
̶d̶o̶c̶u̶m̶e̶n̶t̶.̶g̶e̶t̶E̶l̶e̶m̶e̶n̶t̶B̶y̶I̶d̶(̶'̶f̶i̶r̶s̶t̶N̶a̶m̶e̶'̶)̶.̶v̶a̶l̶u̶e̶ ̶=̶ ̶'̶'̶;̶
$scope.firstName = 'Ghazanfar';
};
您仍然需要创建自定义指令来触发过滤器。因为它是您可以用来获取智能表实例的唯一方法。 （据我所知）
以下是提交按钮指令的示例。
(function() {
"use strict";
angular
.module('st-submit-search', ['smart-table'])
.directive('stSubmitSearch', function () {
return {
restrict: 'EA',
require: '^stTable', // to get smart-table as dependency
link: function(scope, element, attrs, ctrl) {
// ctrl is smart-table instance
element.bind('click', function(evt) {
scope.$apply(ctrl.pipe());
});
}
};
});
})();
然后在您的视图中使用该指令：
<button st-submit-search ng-click="changeSearch()">Change Search</button>
以上是关于当搜索过滤器值从javascript更改时，智能表不会更新[重复]的主要内容，如果未能解决你的问题，请参考以下文章
UITableView reloadData 在没有行的情况下无法工作