搜索过滤器值从javascript更改时智能表不会更新 [英] Smart Table not update when search filter value changes from javascript
问题描述
这里是我的控制器
$ b $ $ $ p $ angular.module （'myApp'，['smart-table']）
.controller（'mainCtrl'，['$ scope'，'$ timeout'，
function（$ scope，$ timeout）{
$ b $ var nameList = ['Pierre'，'Pol'，'Jacques'，'Robert'，'Elisa'];
var familyName = ['Dupont'，'Germain'，'Delcourt' ，'bjip'，'Menez'];
$ scope.isLoading = false;
$ scope.rowCollection = [];
函数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;
返回{
firstName：姓氏，
姓氏：姓氏，
年龄：年龄，
电子邮件：电子邮件，
余额：余额
};
$ b $ scope.columns = ['firstName'，'lastName'，'age'，'email'，'balance']; （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 =rowCollectionclass =table table-striped>
< thead>
< tr>
< th ng-repeat =col in columnsst-sort ={{col}}> {{col}}< / th>
< / tr>
< tr>
< th>
< input st-search =firstNameid =firstNameplaceholder =search for firstnameclass =input-sm form-controltype =search/>
< / th>
< th colspan =4>
< input st-search placeholder =global searchclass =input-sm form-controltype =search/>
< / th>
< / tr>
< / thead>
< tbody>
< tr ng-repeat =rowCollection>
< td ng-repeat =col in columns> {{row [col]}}< / td>
< / tr>
< / tbody>
< / table>
< button ng-click =changeSearch（）>更改搜索< / button>
< / div>
< div ng-show =isLoadingclass =loading-indicator>< / div>
< script src =angular.min.js>< / script>
< script src =smart-table.min.js>< / script>
< script src =app2.js>< / script>
其点击方法更改搜索过滤器值其值更改，但表不被过滤。
需要帮助？是否有可能从代码更改搜索过滤器的值？
要使用按钮触发过滤器，您需要创建一个<自定义指令。
$ scope.changeSearch = function（）{
document.getElementById 'firstName'）。value ='';
};
您不应该在控制器中使用DOM操作。要操纵DOM值，你可以使用ngModel。
< input st-search =firstNameid =firstNameplaceholder =search for firstnameclass =input -sm form-controltype =searchng-model =firstName/>
然后将 changeSearch 函数更改为： / p>
$ scope.changeSearch = function（）{
$ scope.firstName ='Ghazanfar';
};
您仍然需要创建自定义指令来触发过滤器。因为这是您可以用来获取智能表实例的唯一方法。 （AFAIK）
这是一个提交按钮指令的例子。
（function（）{
use strict;
angular
.module（'st-submit-search'，['smart-table' ]）
.directive（'stSubmitSearch'，function（）{
return {
restrict：'EA'，
require：'^ stTable'，// get smart-表作为依赖项
link：function（scope，element，attrs，ctrl）{
// ctrl是smart-table实例
element.bind（'click'，function（evt）{
scope。$ apply（ctrl.pipe（））;
}）;
}
};
}）;
}）（）;
然后在您的视图中使用指令：
<按钮st-submit-search ng-click =changeSearch（）>更改搜寻< /按钮>
I am using Angular Smart Table . While I am using search filters using st-search directive , when I change its value from javascript table doesnot get updates . here is my code
Here is my controller
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 = '';
};
}
]);
Here is the 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>
I took a button and on its click method change search filter value its value changes but table doesnot get filtered. Need help? Is it possible to change search filters value from code?
To trigger the filter with a button, you need to create a custom directive.
$scope.changeSearch = function () {
document.getElementById('firstName').value = '';
};
You should not use DOM manipulation in controller. To manipulate DOM value, you could use ngModel.
<input st-search="firstName" id="firstName" placeholder="search for firstname" class="input-sm form-control" type="search" ng-model="firstName" />
Then change your changeSearch function to:
$scope.changeSearch = function () {
$scope.firstName = 'Ghazanfar';
};
You still need to create custom directive to trigger the filter. Because it's the only method you can use to get the smart-table instance. (AFAIK)
Here is an example of a submit button directive.
(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());
});
}
};
});
})();
And then use the directive in your view:
<button st-submit-search ng-click="changeSearch()">Change Search</button>
这篇关于搜索过滤器值从javascript更改时智能表不会更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
