Search code examples
htmlcssangularjsmeanjs

Filter user details when clicking on a radio button?


How can i filter user details when clicking on a radio button?

Plunker

*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"
}
]
  • We tried alt="{{vm.authentication.user.displayName}}" but it's not working perfectly.

Solution

  • 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