如何将智能表`st-search`与ng-model集成？ [英] How to integrate Smart Table `st-search` with ng-model?
本文介绍了如何将智能表`st-search`与ng-model集成？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何设置智能表上不认为用户输入的输入搜索值？ ??
这里是我的代码，当用户单击复选框时，输入字段是自动输入Sam，但表记录不是过滤器。并更新....这是我的代码：
How to set input search value that not thought user input on Smart Table? ?? here is my code,When user click the check box,The input field is auto input "Sam", but the table record is not filter. and update.... Here is my code:
<body>
<div class='container' ng-app='smarttabledemo' ng-controller='smarttabledemo'>
<table st-table='data' class='table'>
<thead>
<tr>
<th colspan='999'>
<input name="myCheck[]" type="checkbox" id="myCheck"
st-submit-search ng-model="confirmed" ng-true-value="30"
ng-false-value="1" ng-change="showcheckbox();">
<input st-search="firstName" placeholder="search for firstname"
class="input-sm form-control" type="search"
ng-value="myVar" ng-model="myVar"/>
</th>
</tr>
<tr>
<th st-sort='firstName'>First Name</th>
<th st-sort='lastName'>Last Name</th>
<th st-sort='phone'>Phone Number</th>
<th st-sort='hometown'>Hometown</th>
</tr>
</thead>
<tbody>
<tr st-select-row='row' ng-repeat='row in data'>
<td>{{row.firstName}}</td>
<td>{{row.lastName}}</td>
<td>{{row.phone}}</td>
<td>{{row.hometown}}</td>
</tr>
</tbody>
</table>
</div>
'use strict';
angular.module('smarttabledemo', ['smart-table'])
.run(function() {
console.clear();
})
.controller('smarttabledemo', function($scope) {
$scope.data = [
{ firstName: 'Sam', lastName: 'Evans', phone: 'Not Provide', hometown: 'Anytown, ST' },
{ firstName: 'Saul', lastName: 'Evans', phone: '555-555-1234', hometown: 'Anytown, ST' },
{ firstName: 'Charlie', lastName: 'Anders', phone: '555-555-9876', hometown: 'Springfield, ST' },
{ firstName: 'Jessica', lastName: 'Cortez', phone: 'Not Provide', hometown: 'Springfield, ST' },
{ firstName: 'Amy', lastName: 'Wood', phone: '555-555-1348', hometown: 'Metroville, ST' },
]
$scope.showcheckbox = function () {
var myCheck = document.getElementsByName("myCheck[]");
for (var i = 0; i < myCheck.length; i++) {
if(myCheck[i].checked ){
$scope.myVar = "Sam";
}
}
}
小提琴
这是我的代码，谢谢
我的目标是希望用户单击复选框，该表搜索Sam记录，thx
Fiddle Here is my code, thanks My aims is hope user click the checkbox, The table is search about "Sam" record, thx
推荐答案
智能表未与
以下是 st-search 指令的替代品，该指令将智能表搜索与 ng-model 指令：
Here is a replacement for the st-search directive which integrates Smart Table search with the ng-model directive:
app.directive('xdStSearch', ['stConfig', '$timeout', function (stConfig, $timeout) {
return {
require: {table: '^stTable', model: 'ngModel'},
link: function (scope, element, attr, ctrl) {
var tableCtrl = ctrl.table;
var promise = null;
var throttle = attr.stDelay || stConfig.search.delay;
var event = attr.stInputEvent || stConfig.search.inputEvent;
var trimSearch = attr.trimSearch || stConfig.search.trimSearch;
attr.$observe('xdStSearch', function (newValue, oldValue) {
var input = ctrl.model.$viewValue;
if (newValue !== oldValue && input) {
tableCtrl.tableState().search = {};
input = angular.isString(input) && trimSearch ? input.trim() : input;
tableCtrl.search(input, newValue);
}
});
// view -> table state
ctrl.model.$parsers.push(throttleSearch);
ctrl.model.$formatters.push(throttleSearch)
function throttleSearch(value) {
if (promise !== null) {
$timeout.cancel(promise);
}
promise = $timeout(function () {
var input = angular.isString(value) && trimSearch ? value.trim() : value;
tableCtrl.search(input, attr.xdStSearch || '');
promise = null;
}, throttle);
return value;
}
}
};
}])
用法
Usage
<input xd-st-search="{{searchCol}}"
placeholder="search for {{searchCol}}"
class="input-sm form-control"
ng-model="searchVal" />
DEMO
The DEMO
angular.module('app', ['smart-table'])
.directive('xdStSearch', ['stConfig', '$timeout', function (stConfig, $timeout) {
return {
require: {table: '^stTable', model: 'ngModel'},
link: function (scope, element, attr, ctrl) {
var tableCtrl = ctrl.table;
var promise = null;
var throttle = attr.stDelay || stConfig.search.delay;
var event = attr.stInputEvent || stConfig.search.inputEvent;
var trimSearch = attr.trimSearch || stConfig.search.trimSearch;
attr.$observe('xdStSearch', function (newValue, oldValue) {
var input = ctrl.model.$viewValue;
if (newValue !== oldValue && input) {
tableCtrl.tableState().search = {};
input = angular.isString(input) && trimSearch ? input.trim() : input;
tableCtrl.search(input, newValue);
}
});
// view -> table state
ctrl.model.$parsers.push(throttleSearch);
ctrl.model.$formatters.push(throttleSearch)
function throttleSearch(value) {
if (promise !== null) {
$timeout.cancel(promise);
}
promise = $timeout(function () {
var input = angular.isString(value) && trimSearch ? value.trim() : value;
tableCtrl.search(input, attr.xdStSearch || '');
promise = null;
}, throttle);
return value;
}
}
};
}])
.controller('mainCtrl', function ($scope, $timeout) {
var nameList = ['Pierre', 'Pol', 'Jacques', 'Robert', 'Elisa'];
var familyName = ['Dupont', 'Germain', 'Delcourt', 'bjip', 'Menez'];
$scope.columns = ['firstName', 'lastName', 'age', 'email', 'balance'];
$scope.rowCollection = [];
for (var i = 0; i < 10; i++) {
$scope.rowCollection.push(createRandomItem());
}
$scope.changeSearch = function () {
$scope.firstName = 'Ghazanfar';
};
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
};
}
})
<script src='//unpkg.com/angular/angular.js'></script>
<script src='//unpkg.com/angular-smart-table/dist/smart-table.js'></script>
<body ng-app="app" ng-controller="mainCtrl">
<div class="table-container">
<div>Preset
<select ng-model="searchVal">
<option value="Ja">Ja</option>
<option value="Po">Po</option>
<option value="j">j</option>
</select>
</div>
<table st-table="rowCollection" class="table table-striped">
<caption style="text-align: left">
<input st-search placeholder="global search"
class="input-sm form-control" />
<br>
<select ng-model="searchCol" ng-init="searchCol='firstName'">
<option value="firstName">Search firstName</option>
<option value="lastName">Search lastName</option>
</select>
<input xd-st-search="{{searchCol}}"
placeholder="search for {{searchCol}}"
class="input-sm form-control"
ng-model="searchVal" />
</caption>
<thead>
<tr>
<th ng-repeat="col in columns" st-sort="{{col}}">{{col}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection">
<td ng-repeat="col in columns">{{row[col]}}</td>
</tr>
</tbody>
</table>
</div>
</body>
这篇关于如何将智能表`st-search`与ng-model集成？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
