Fatal编程技术网
  • javascript/
  • Javascript 复选框列表ng重复过滤器动态角度JS

Javascript 复选框列表ng重复过滤器动态角度JS

javascript angularjs filter

Javascript 复选框列表ng重复过滤器动态角度JS,javascript,angularjs,filter,checkboxlist,Javascript,Angularjs,Filter,Checkboxlist,我试图在AngularJS中，根据从DB获得的数据，使用动态过滤器（位置-值，如US、in、CA等）将员工详细信息显示为复选框列表。我尝试了多种方法，但都没有成功。请帮助从复选框列表中获取动态筛选器 我的代码示例如下： <html> <body ng-app="myapp" ng-controller="myController"> <div >Location</div> <table>

我试图在AngularJS中，根据从DB获得的数据，使用动态过滤器（位置-值，如US、in、CA等）将员工详细信息显示为复选框列表。我尝试了多种方法，但都没有成功。请帮助从复选框列表中获取动态筛选器

我的代码示例如下：

  <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>


位置
{{emp.Location}
雇员
地址
位置
{{empN.EmpName}
{{empN.Address}
{{empN.Location}
var myapp=angular.module（'myapp'，['ui.unique']））
.controller（“myController”，函数（$scope，$http）{
$http({
方法：“Get”，
参数：{strName:$scope.strName}，
url:'Emp.asmx/GetEmpbyName'
}).然后（功能（响应）{
$scope.EmpResult=response.data；
})
});
使用带有单引号的过滤器。这将从复选框中筛选数据。

我已经为您的问题创建了一个镜像，请查看它。我认为在你的情况下应该行得通


安古拉斯普朗克
文件。写（“”）；
位置
{{empL}}
雇员
地址
位置
{{empN.EmpName}
{{empN.Address}
{{empN.Location}
var myApp=angular.module（'myApp'，[]）；
controller（“myController”['$scope'，'$http'，函数（$scope，$http）{
$scope.locations=[]；
$scope.search={}；
$scope.locChkBox={}；
$scope.locChkBox.loc=[]；
$scope.locChkBox.loc.push（“美国”）；
$scope.init=函数（）{
$scope.EmpResult=JSON.parse（“[{”EmpName:“jondoe”，“Address:“dummyAddr”，“Location:“US”}，{”EmpName:“jondoe2”，“Address:“dummyAddr2”，“Location:“IN”}，{”EmpName:“Jondo4”，“Address:“dummyAddr4”，“Location:“US”}，{”EmpName:“Jondo5”，“Address:“dummyAddr5”，“Location:“IN”{”EmpName:“IN”}，{“jondoe6”，“地址”：“dummyAddr6”，“地点”：“CA”}，{“EmpName”：“jondoe7”，“地址”：“dummyAddr7”，“地点”：“US”}，{“EmpName”：“jondoe8”，“地址”：“dummyAddr8”，“地点”：“IN”}，{“EmpName”：“jondoe9”，“地址”：“CA”}，{“EmpName”：“Jondo11”，“地址”：“dummyAddr11”，“地点”：“US”}，{“EmpName”：“Jondo22”，“地址”：“dummyAddr22”位置“：”在“}]'）；
var标志=[]，
输出=[]，
l=$scope.EmpResult.length，
我
对于（i=0；i
据我所知，筛选器不是这样工作的。您必须定义一个实际的筛选器方法（而不是像现在这样使用范围变量）。查看文档。这里有一个很好的描述和非常简单的例子，非常符合您的需要：@FDavidov这是真的，但是@Ravi使用的过滤器来自于他在模块中注入的依赖项
'ui.unique'，因此不需要定义。但是这个依赖项被贬低了，所以我的问题是为什么要使用折旧依赖项？当我修改代码时，我犯了一个错误，但在我的实际代码中，ng应用程序和ng控制器在body标签中。感谢您的代码，它对我有效，但默认情况下，它按位置过滤为“我们”“但在初始加载时，我希望不使用任何筛选器显示所有记录。此外，过滤器在没有ng change=“repopulate（）”的情况下工作。Hi@Ravi，请参阅我更新的
EDIT2
code。如果未选中任何复选框，此代码将显示所有结果，如果选中了其中任何一个复选框，则将根据该复选框显示结果。嗨@Raman，感谢您的快速响应。正如我所预料的那样。谢谢你的帮助。

<tr ng-repeat="empN in EmpResult | filter : 'loc'">