角JS - 基于复选框组筛选(与&安培; OR条件) [英] Angular JS - Filtering based on checkbox groups (AND & OR conditions)

查看:139
本文介绍了角JS - 基于复选框组筛选(与&安培; OR条件)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用angularjs我的项目之一。我想实现一个过滤功能。

I am using angularjs for one of my project. I am trying to implement a filtering functionality.

我用下面

<div class="checkbox" ng-repeat="incidentType in keywords.incidentType">
<label><input type="checkbox" value={{incidentType}}>{{incidentType}}</label>
</div>

的结果示于图像下方

The result is shown in image below

在选中或取消选中复选框,我需要创建一个对象,如下图所示。基于此JSON对象上,我会发送一个请求到服务器,以获取匹配的数据。

On checking or unchecking the check boxes, I need to create a object like below. Based on this json object I will send a request to server to fetch the matching data.

{
    "application": [
        "Athena",
        "EWS"
    ],
    "incidentType": [
        "Publishing Failure",
        "Security Failure"
    ]
}

如何能在这个被angularjs取得任何想法。任何帮助深表AP preciated。

Any idea on how can this be achieved in angularjs. Any help is much appreciated.

推荐答案

这样的事情,你可以用一个对象像你想发送的模式是什么,然后将其绑定到你的NG-重复的数据。我让你先检查在这里: http://jsfiddle.net/DotDotDot/gcEJH/ 结果
我已经采取了您的样品code和我只是增加了一个控制器,一个对象( $ scope.checked ),我在每一个复选框用于NG-模型

for something like this, you can use an object like what you want to send as the model, then bind it to the data in your ng-repeat. I let you check here first : http://jsfiddle.net/DotDotDot/gcEJH/
I've taken your sample code and I just added a controller with an object ($scope.checked ) which I use for the ng-model in each checkbox

$scope.checked={application:{}, incidentType:{}};  

然后,在HTML

then, in the HTML

<div class="checkbox" ng-repeat="incidentType in keywords.incidentType">
<label><input type="checkbox" ng-model='checked.incidentType[incidentType]' ng-true-    value='{{incidentType}}'>{{incidentType}}</label>
</div>

的纳克模型部分告诉角度把值中的物体的incidentType部分,根据对应于该值的凯。这不会给你确切的同一个对象,但你会碰到这样的:

The ng-model part tells angular to put the value in the incidentType part of the object, under the kay corresponding to the value. This won't give you the exact same object, but you will have something like :

{
"application": {
    "Athena": false,
    "EWS": true,
    "EWindows": true
},
"incidentType": {
    "Publishing Failure": true,
    "Security Failure": true
}
}

这实际上是pretty关闭,并从中你可以创建你的要求(或重新创建你想要轻松相同的对象)

which is actually pretty close, and from which you can create your request (or recreate the same object you wanted easily)

希望这有助于,有乐趣

=)

这篇关于角JS - 基于复选框组筛选(与&安培; OR条件)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆