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.
For Example :- in plunker my displayName
is Table 1
means if I click My Question
radio button, my questions only need to filter
.
My HTML radio button:-
<input type="radio" name="myquestion" data-ng-model="myquestion.user.displayName" value="myquestion" >
My HTML Filter:-
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.I think what youre trying to do was to filter the list base on displayName of logged in user, right? I dont know if you guys have a service for user auth I just assume that Table 1 was the given logged in user. I use ng-change
to detect if radio button is changed for me to filter all and 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:
<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. here is the link http://plnkr.co/edit/U5M29NMfvtY0vTnQyjmT?p=preview