- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
如何在智能表格上设置不考虑用户输入的输入搜索值? ??这是我的代码,当用户单击复选框时,输入字段会自动输入“Sam”,但表记录不会被过滤。并更新...这是我的代码:
<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";
}
}
}
Fiddle这是我的代码,谢谢我的目标是希望用户点击复选框,该表是搜索“Sam”记录,thx
最佳答案
智能表未与 ng-model 集成指令和 ngModelController .
这是 st-search
指令的替代品,它将智能表搜索与 ng-model
指令集成在一起:
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;
}
}
};
}])
<input xd-st-search="{{searchCol}}"
placeholder="search for {{searchCol}}"
class="input-sm form-control"
ng-model="searchVal" />
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>
关于javascript - 如何将智能表 `st-search`与ng-model集成?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47847077/
我是 C 的新手,在练习中,我必须编写以下代码部分的输出,即 3。但我不明白为什么会这样。 int main() { char st[100]="efgh"; printf ("\n%
我遇到了这个错误: java.lang.IllegalArgumentException: Removing a detached instance model.student 然后我在stackov
python 3.8.10Ubuntu 20.04 使用 st_aggrid (用于 Streamlit 的 AgGrid 的 Python 端口。) Streamlit 允许使用 st.column
这篇文章是识字的Haskell。只需放入“pad.lhs”之类的文件,ghci就可以运行它。 > {-# LANGUAGE GADTs, Rank2Types #-} > import Control
我有一个 NUCLEO-F401RE board (与 STM32F401RE ) 它在大多数情况下都运行良好。最近在这里,我按照书中的一个教程 "Mastering STM32 " 它说安装的地方
最近一两个月一直在学习Haskell,最近解决了this编码问题。额外的挑战是在没有额外空间和线性时间的情况下完成任务,我认为这不可能以纯函数的方式完成,所以自然而然地我发现了 ST monad,我认
关闭。这个问题需要details or clarity .它目前不接受答案。 想改进这个问题吗? 通过 editing this post 添加细节并澄清问题. 关闭 4 年前。 Improve t
我已经搜索过堆栈溢出,但没有一个能真正解决我的问题。 我能够为我的库构建 .so 文件并将其加载到 jniLibs 目录中。当我运行应用程序时,我得到了这个 java.lang.Unsatisfied
我在类加载器方面遇到问题。有时有效,有时无效。 当我开始时,我已经测试了它的工作原理,但不是从 *.jar 测试的: URL url = AcAnalyzer.class.getResource(".
我正在玩http://hackage.haskell.org/packages/archive/vault/0.2.0.0/doc/html/Data-Vault-ST.html并想要编写如下所示的函
为什么 ST 被设计为禁止使用以下代码 as shown in the wikibook ?这篇文章似乎表明,如果允许的话,ST 效果会泄漏到另一个 ST 中,但我不太明白为什么。 我似乎无法运行特定
我最近开始在 Hackage 上查看核心库,并且有一个反复出现的习惯用法我不明白。这是 ST module 中的一个示例: instance Monad (ST s) where {-# IN
如果输入 url 重新启动(他们在 rtmp 流中添加新视频)然后在我的 ffmpeg 我看到这个 PTS 4294794919, next:104020298 invalid dropping st
ST monad 在 GHC 中有特殊的编译器支持吗? 最佳答案 您可以在此处查看 STRefs 的代码:http://haskell.org/ghc/docs/latest/html/librari
我确信这将是一个简单的项目,但有一个作为测试启动的项目。 创建后,它被保存为“Project2.dpr” 现在测试不再是“测试”,我想将项目名称更改为更有意义的名称。 最好的方法是什么? 仅将文件名和
我有一些代码目前使用 ST monad 进行评估。我喜欢不要把 IO 放在任何地方,因为 runST方法产生一个纯结果,并表明这样的结果是可以安全调用的(相对于 unsafePerformIO )。但
我正在努力实现 UCT Haskell 中的算法,需要大量的数据处理。无需过多讨论,它是一种模拟算法,在每个“步骤”中,根据某些统计属性选择搜索树中的叶节点,在该叶处构造一个新的子节点,以及与该叶节点
我想学习使用 ST-Monad。因此,我想为每个整数重写一些代码计算——直到一个极限——所有它的真因数的列表。结果应该是一个数组,索引“n”的条目应该是它的真除数的列表。 这是通过为每个整数“n”计算
我在 ST 中有一个计算,它通过 Data.Vector.Unboxed.Mutable 分配内存。该向量永远不会被读取或写入,也不会在 runST 之外保留任何对其的引用(据我所知)。我遇到的问
以下代码创建数组,初始化,然后返回不可变数组。 import Data.Array import Control.Monad.ST import Data.Array.ST import qualif
我是一名优秀的程序员,十分优秀!