[英]Filter user details when clicking on a radio button?
How can i filter user details when clicking on a radio button? 单击单选按钮时如何过滤用户详细信息?
*Actually, I want to filter authenticate user questions in the list page, so I have created a plunker. *实际上,我想在列表页面中过滤认证用户的问题,因此我创建了一个插件。 If i'm an authenticated user (or) admin, I want to filter myquestions
only in the list page. 如果我是经过身份验证的用户(或)管理员,则只想在列表页面中过滤myquestions
。
For Example :- in plunker my displayName
is Table 1
means if I click My Question
radio button, my questions only need to filter
. 例如:-在plunker中,我的displayName
是Table 1
意味着如果单击“ My Question
单选按钮,则只需要filter
我的问题。
My HTML radio button:- 我的HTML单选按钮:-
<input type="radio" name="myquestion" data-ng-model="myquestion.user.displayName" value="myquestion" >
My HTML Filter:- 我的HTML过滤器:-
ng-repeat="question in questions | filter: myquestion"
**My Html Data:-**
<div ng-repeat="question in questions | filter: myquestion">
<small>
Posted on
<span data-ng-bind="question.created | date:'mediumDate'"></span>
<span data-ng-bind="question.user.displayName"></span>
</small>
</div>
My Controller Data:- 我的控制器数据:
$scope.questions = [
{
"_id": "583433ddc021a5d02949a51b",
"user": {
"_id": "5834336ac021a5d02949a51a",
"displayName": "mani R",
"location": "ICF",
"dob": "1991-10-05T18:30:00.000Z",
"religion": "Christian",
"roles": [
"user"
],
"profileImageURL": "modules/users/client/img/profile/default.png"
},
"__v": 0,
"upvoters": [],
"category": "Moral Ethics",
"content": "Dhoni",
"title": "which batsman is best in the world?",
"created": "2016-11-22T12:02:37.376Z"
},
{
"_id": "582c34b3ff26bd603e1e5383",
"user": {
"_id": "58072aba0f82a61823c434df",
"displayName": "Table 1",
"dob": "1991-10-04T18:30:00.000Z",
"location": "Icf",
"religion": "Hindu",
"roles": [
"admin"
],
"profileImageURL": "./modules/users/client/img/profile/uploads/c756711556ab6864f408697c7a98aedc"
},
"__v": 1,
"upvoters": [],
"users": [],
"comments": [
{
"created": 1479365394684,
"email": "ms@e21designs.com",
"name": "Table 1",
"commentText": "Dhoni"
}
],
"friend_tag": [],
"emotion": "Confused",
"category": "Environment & Health",
"content": "sachin?",
"title": "who is best player in this world?",
"created": "2016-11-16T10:28:03.859Z"
},
{
"_id": "582c3418ff26bd603e1e5382",
"user": {
"_id": "582c1f4b53cf7fec2ddf282e",
"displayName": "selvam R",
"dob": "1991-10-04T18:30:00.000Z",
"roles": [
"kp"
],
"profileImageURL": "modules/users/client/img/profile/default.png"
},
"__v": 0,
"upvoters": [],
"category": "Environment & Health",
"content": "he is tennis player",
"created": "2016-11-16T10:25:28.835Z"
},
{
"_id": "582ad554714543e037cf3bf2",
"user": {
"_id": "58072aba0f82a61823c434df",
"displayName": "Table 1",
"dob": "1991-10-04T18:30:00.000Z",
"location": "Icf",
"religion": "Hindu",
"roles": [
"admin"
],
"profileImageURL": "./modules/users/client/img/profile/uploads/c756711556ab6864f408697c7a98aedc"
},
"__v": 1,
"upvoters": [
"ms@e21designs.com"
],
"upvotes": 1,
"category": "Moral Ethics",
"created": "2016-11-15T09:28:52.403Z"
},
{
"_id": "5821e7c667b70aac2b8fdfdc",
"user": {
"_id": "58072aba0f82a61823c434df",
"displayName": "Table 1",
"dob": "1991-10-04T18:30:00.000Z",
"location": "Icf",
"religion": "Hindu",
"roles": [
"admin"
],
"profileImageURL": "./modules/users/client/img/profile/uploads/c756711556ab6864f408697c7a98aedc"
},
"__v": 1,
"upvoters": [
"ms@e21designs.com"
],
"upvotes": 1,
"category": "Religion & Culture",
"created": "2016-11-08T14:57:10.354Z"
}
]
alt="{{vm.authentication.user.displayName}}"
but it's not working perfectly. 我们尝试了alt="{{vm.authentication.user.displayName}}"
但工作不正常。 I think what youre trying to do was to filter the list base on displayName of logged in user, right? 我认为您要执行的操作是根据已登录用户的displayName过滤列表,对吗? I dont know if you guys have a service for user auth I just assume that Table 1 was the given logged in user. 我不知道你们是否为用户身份验证提供服务,我只是假设表1是给定的登录用户。 I use ng-change
to detect if radio button is changed for me to filter all and myquestions. 我使用ng-change
来检测单选按钮是否已更改,以便我过滤所有和myquestions。
on my controller: 在我的控制器上:
$scope.authUser = {
"_id": "58072aba0f82a61823c434df",
"displayName": "Table 1",
"dob": "1991-10-04T18:30:00.000Z",
"location": "Icf",
"religion": "Hindu",
"roles": [
"admin"
],
"profileImageURL": "./modules/users/client/img/profile/uploads/c756711556ab6864f408697c7a98aedc"
};
on html: 在html上:
<div class="col-md-3" id="donate">
<label class="green">
<input type="radio" name="myquestion" ng-model="myQuestion" value="myquestion" ng-change="stateChange(myQuestion)">
<span>My Questions</span>
</label>
<label class="green">
<input type="radio" name="myquestion" ng-model="myQuestion" value="all" ng-change="stateChange(myQuestion)">
<span>All</span>
</label>
</div>
<div ng-repeat="question in questions | filter: { user.displayName: searchText }">
<small>
Posted on
<span data-ng-bind="question.created | date:'mediumDate'"></span>
<span data-ng-bind="question.user.displayName"></span>
</small>
</div>
For working sample I edited your plunkr. 对于工作样本,我编辑了您的plunkr。 here is the link http://plnkr.co/edit/U5M29NMfvtY0vTnQyjmT?p=preview 这是链接http://plnkr.co/edit/U5M29NMfvtY0vTnQyjmT?p=preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.