- iOS/Objective-C 元类和类别
- objective-c - -1001 错误,当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
我正在尝试在 AngularJS 中使用动态过滤器(位置 - 值,如美国、印度、加利福尼亚州等)显示员工详细信息,作为基于从数据库获取的数据的复选框列表。我尝试了多种方法都没有成功。请帮助实现 Checkboxlist 的动态过滤器。
我的代码示例如下:
<html>
<body ng-app="myapp" ng-controller="myController">
<div >Location</div>
<table>
<tbody>
<tr ng-repeat="empL in EmpResult | unique : 'Location'">
<td>
<span>
<input type="checkbox" ng-model="loc" value={{empL.Location}} />
{{empL.Location}}
</span>
</td>
</tr>
</tbody>
</table>
<table align="left" style="width: 100%" class="table">
<thead>
<tr>
<th align="left" style="width: 30%">Employee</th>
<th align="left" style="width: 20%">Address</th>
<th align="left" style="width: 15%">Location</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="empN in EmpResult | filter : loc">
<td align="left" style="width: 30%">{{empN.EmpName}}</td>
<td align="left" style="width: 10%">{{empN.Address}}</td>
<td align="left" style="width: 15%">{{empN.Location}}</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var myapp = angular.module('myapp', ['ui.unique'])
.controller("myController", function ($scope, $http) {
$http({
method: 'Get',
params: { strName: $scope.strName },
url: 'Emp.asmx/GetEmpbyName'
}).then(function (response) {
$scope.EmpResult = response.data;
})
});
</script>
</body>
</html>
最佳答案
我已经为你的问题创建了一个镜像,请看一下。我认为它应该适用于您的情况。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<div ng-init="init()">Location</div>
<table>
<tbody>
<tr ng-repeat="empL in locations">
<td>
<span>
<input type="checkbox" name="locations + $index" data-ng-model="locChkBox.loc[$index]" ng-true-value="'{{empL}}'" ng-false-value="" ng-change="repopulate()"/>
{{empL}}
</span>
</td>
</tr>
</tbody>
</table>
<table align="left" style="width: 100%" class="table">
<thead>
<tr>
<th align="left" style="width: 30%">Employee</th>
<th align="left" style="width: 20%">Address</th>
<th align="left" style="width: 15%">Location</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="empN in EmpResult | filter : locFilter ">
<td align="left" style="width: 30%">{{empN.EmpName}}</td>
<td align="left" style="width: 10%">{{empN.Address}}</td>
<td align="left" style="width: 15%">{{empN.Location}}</td>
</tr>
</tbody>
</table>
<script>
var myApp = angular.module('myApp', []);
myApp.controller("myController", ['$scope', '$http', function($scope, $http) {
$scope.locations = [];
$scope.search = {};
$scope.locChkBox = {};
$scope.locChkBox.loc = [];
$scope.locChkBox.loc.push("US");
$scope.init = function() {
$scope.EmpResult = JSON.parse('[{"EmpName":"jondoe","Address":"dummyAddr","Location":"US"},{"EmpName":"jondoe2","Address":"dummyAddr2","Location":"IN"},{"EmpName":"jondoe3","Address":"dummyAddr3","Location":"CA"},{"EmpName":"jondoe4","Address":"dummyAddr4","Location":"US"},{"EmpName":"jondoe5","Address":"dummyAddr5","Location":"IN"},{"EmpName":"jondoe6","Address":"dummyAddr6","Location":"CA"},{"EmpName":"jondoe7","Address":"dummyAddr7","Location":"US"},{"EmpName":"jondoe8","Address":"dummyAddr8","Location":"IN"},{"EmpName":"jondoe9","Address":"dummyAddr9","Location":"CA"},{"EmpName":"jondoe11","Address":"dummyAddr11","Location":"US"},{"EmpName":"jondoe22","Address":"dummyAddr22","Location":"IN"}]');
var flags = [],
output = [],
l = $scope.EmpResult.length,
i;
for (i = 0; i < l; i++) {
if (flags[$scope.EmpResult[i].Location]) continue;
flags[$scope.EmpResult[i].Location] = true;
output.push($scope.EmpResult[i].Location);
}
$scope.locations = output;
};
$scope.locFilter = function(item) {
for (var i = 0; i < $scope.locChkBox.loc.length; i++) {
if (item.Location === $scope.locChkBox.loc[i])
return true;
}
return false;
};
}]);
</script>
</body>
</html>
编辑 2
如果没有选中任何复选框,此代码将显示所有值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<div ng-init="init()">Location</div>
<table>
<tbody>
<tr ng-repeat="empL in locations">
<td>
<span>
<input type="checkbox" name="locations + $index" data-ng-model="locChkBox.loc[$index]" ng-true-value="'{{empL}}'" ng-false-value="" ng-change="repopulate()"/>
{{empL}}
</span>
</td>
</tr>
</tbody>
</table>
<table align="left" style="width: 100%" class="table">
<thead>
<tr>
<th align="left" style="width: 30%">Employee</th>
<th align="left" style="width: 20%">Address</th>
<th align="left" style="width: 15%">Location</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="empN in EmpResult | filter : locFilter ">
<td align="left" style="width: 30%">{{empN.EmpName}}</td>
<td align="left" style="width: 10%">{{empN.Address}}</td>
<td align="left" style="width: 15%">{{empN.Location}}</td>
</tr>
</tbody>
</table>
<script>
var myApp = angular.module('myApp', []);
myApp.controller("myController", ['$scope', '$http', function($scope, $http) {
$scope.locations = [];
$scope.search = {};
$scope.locChkBox = {};
$scope.locChkBox.loc = [];
$scope.init = function() {
$scope.EmpResult = JSON.parse('[{"EmpName":"jondoe","Address":"dummyAddr","Location":"US"},{"EmpName":"jondoe2","Address":"dummyAddr2","Location":"IN"},{"EmpName":"jondoe3","Address":"dummyAddr3","Location":"CA"},{"EmpName":"jondoe4","Address":"dummyAddr4","Location":"US"},{"EmpName":"jondoe5","Address":"dummyAddr5","Location":"IN"},{"EmpName":"jondoe6","Address":"dummyAddr6","Location":"CA"},{"EmpName":"jondoe7","Address":"dummyAddr7","Location":"US"},{"EmpName":"jondoe8","Address":"dummyAddr8","Location":"IN"},{"EmpName":"jondoe9","Address":"dummyAddr9","Location":"CA"},{"EmpName":"jondoe11","Address":"dummyAddr11","Location":"US"},{"EmpName":"jondoe22","Address":"dummyAddr22","Location":"IN"}]');
var flags = [],
output = [],
l = $scope.EmpResult.length,
i;
for (i = 0; i < l; i++) {
if (flags[$scope.EmpResult[i].Location]) continue;
flags[$scope.EmpResult[i].Location] = true;
output.push($scope.EmpResult[i].Location);
}
$scope.locations = output;
};
$scope.locFilter = function(item) {
if($scope.locChkBox.loc.isNull()) return true;
for (var i = 0; i < $scope.locChkBox.loc.length; i++) {
if (item.Location === $scope.locChkBox.loc[i])
return true;
}
return false;
};
}]);
Array.prototype.isNull = function (){
return this.join().replace(/,/g,'').length === 0;
};
</script>
</body>
</html>
关于javascript - Checkboxlist ng-repeat过滤器动态angularjs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38691323/
将项目从一个 CheckBoxList 添加到另一个 CheckBoxList 如何使用 asp.net 检查该项目是否已存在于第二个 CheckBoxList 中C# 我编写的用于在 CheckBo
我使用 C# 生成了一个包含多个项目的 CheckBoxList。现在我想设置 CheckBoxList 中允许的最大选中项数。如果用户检查的项目超过允许的最大数量,则会出现警报或自动取消选中其他项目
我提交了表单并收到了一封说明表单结果的电子邮件,在这种情况下,如果选中了三个复选框中的任何一个,就会显示结果。我当前的问题是,如果选中了一个以上的复选框,它不会显示选中第二个或第三个复选框。 示例:我
以下是我将复选框动态添加到 CheckBoxList 的代码: foreach (WCore.CategoryFields cat in Global.getCategories()) {
我正在实现一个checkboxlist,如果任何项目被选中\未选中,无论是哪一个,我都想发起一个事件。如何做到这一点,请帮助。 最佳答案 根据 MSDN void Index_Changed(Obj
我的 checkBoxList 包含月份数,当用户单击“检查所有我有此 HTML”时,我需要检查此列表中的所有项目:
我正在寻找 CheckBoxList 的 CSS 代码以在元素之间添加线条。有人可以帮助我如何在 CheckBoxList 的元素之间添加分界线吗? 下面是我正在查看的格式的示例图像。 下面是我为 C
我在页面上有一个CheckBoxList。页面上的所有控件均位于 UpdatePanel 中。 使用 JavaScript 单击 anchor 标记时向其添加项目。 functio
有谁知道如何在一行中清除CheckBoxList? 我有一个包含数百个值的 CheckBoxList,我只是想加快代码的速度。 即无需像这样遍历每个复选框: foreach (ListItem li
我有一个包含一些项目的 CheckBoxList,当用户单击一个按钮时,我希望将选中的文本框的值添加到一个字符串中。我在这里到处寻找答案,但大多数都不起作用或产生不良结果。这是我到目前为止的代码: s
假设我有下表: 和以下 CheckBoxList: 在代码隐藏中,我按如下方式填充它: MyCheckBoxList.DataSource = from c in EMPLOYEE
我正在努力寻找问题的解决方案,我花了相当多的时间尝试其他解决方案但无济于事。任何帮助或解释将不胜感激。 我有一个 SQL 数据库,其中有一个名为“categories”的字符串字段,其中包含由“,”分
嘿,我遇到了这个非常烦人的问题:我有一个 CheckBoxList 从数据源获取项目及其值和所有内容。我需要的是在选中值为“33”的项目时显示一些面板。所以我需要获取单击的项目、上次单击的内容或其他内
我有 Checkboxlist,但无法为其提供必需的字段验证器或自定义验证器。 它给了我运行时异常。 语言:Vb.net 和 asp.net 最佳答案 使用 jQuery 和 ASP.Net Cust
海 是否可以使用这种形式的复选框列表: 提前致谢。 最佳答案 只需设置重复方向。 RepeatDirection="Horizontal" 关于asp.net - CheckBoxList 水平,我们
我试图只允许用户从可能有 12 个选项的复选框列表中选择 5 个选项。我已添加此代码,但用户可以根据自己的意愿进行选择。 这是我的完整语法。 为什么这没有按照我的意愿发出警报?
我有一个似乎加载并正确执行所有操作的 CheckboxList,除了当我执行回发时,它不会设置 Item.Selected 属性。我为整个页面禁用了 View 状态。 我这样加载它(在每次加载时都在
我有一个带复选框的列表框,当事件结束时,我需要取消选中每个复选框。 这是我的 xaml,但在代码中如何清除此值?谢谢
我在 ASP.NET 中使用 CheckBoxList 应用程序: 我想在单击按钮后更改所选元素的样式。为此,我有 JavaScript 功能: function c
下面是我的复选框列表。文本显示在复选框下方。 如何将文本排成一行?这是我的查看源代码 02. Form of product order/purchase (POS with
我是一名优秀的程序员,十分优秀!