How can we refine the user information based on the selection of a radio button?

How do I apply a filter to user details when selecting a radio button?

Visit Plunker

*I need to display only the questions of authenticated users on the list page, so I created a plunker example. If the user is authenticated or an admin, I want to filter and show only their questions on the list page.

For instance: In the plunker example, my displayName is set as Table 1. When I select the My Question radio button, only my questions should be displayed.

HTML radio button code:

<input type="radio" name="myquestion" data-ng-model="myquestion.user.displayName" value="myquestion" >

HTML Filter:

    ng-repeat="question in questions | filter: myquestion"

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

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"
},
...
]
  • We attempted to use
    alt="{{vm.authentication.user.displayName}}"
    , but it didn't function correctly.

Answer №1

It seems like you're attempting to filter the list based on the displayName of the logged-in user, correct? I'm not sure if there's a user auth service in place, so I assumed "Table 1" was the logged-in user. I used ng-change to identify when the radio button is changed in order to filter for "My Questions" and all questions.

In 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"
};

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

I made some changes to your Plunkr for a working sample. Here is the link: http://plnkr.co/edit/U5M29NMfvtY0vTnQyjmT?p=preview

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The functionality of AngularJS ng-include and HistoryJS has suddenly ceased to work

After implementing the ng-include directive in my code, I encountered a strange issue. Whenever I navigate to a page that includes this directive, I find myself trapped on that page. The back button no longer functions and I am stuck in an endless loop of ...

`Slide bootstrap carousel without moving other elements`

.carousel { position: relative; height: 500px; .carousel-inner .item { height: 500px; } .carousel-indicators > li { margin: 0 2px; background-color: $maincolor; border-color: $maincolor; opacity: .7; ...

What is the best way to design a page with a fixed dimension element and a flexible liquid element?

Is there a way to achieve the layout described below without relying on tables? Left element (100px) | Right element (occupies remaining space, even with no content) Thank you! Edit: Here's the link to the code: http://pastebin.com/vU33jNxD ...

Discover the secrets of extracting the ID from a MenuItem within a Menu

Table Ui with menu Struggling with fetching the correct user ID in the edit button The edit button for all users is only displaying the last user's ID If the edit button is not nested inside the Menu, it works fine. However, within the Menu, it onl ...

Grid element's height does not correspond to the responsive square child dimension

In my latest project, I am developing a web application using React and Material-ui. One of the challenges I have encountered is creating a responsive square div for a map component. Unfortunately, attempting to implement a solution from a trick on iamstev ...

Navigating through angularjs is as simple as following these steps

My main directory folder is named angularjs and contains the following files: 1.index.html 2.main.html 3.blue.html 4.red.html 5.green.html I am trying to set up routing using AngularJs, but I am encountering an error. Can you help me figure out what I am ...

Filtering Dropdown List in AngularJS with a Text Input Field and a Submit Button for Filtering Option Values

After exploring , I discovered a feature that enables users to type in a text box and filter results in a pseudo-dropdown. My goal is to enhance this functionality or come up with a better approach for users to type and filter select box options, ultimate ...

Text in a class button that is not skewed

I crafted a button for my website using a CSS class, aiming for a parallelogram shape by utilizing the skew function. The code worked like a charm, giving the button the desired shape. However, I encountered a dilemma where the text inside the button also ...

ISO 8 takes a different approach by disregarding the meta viewport tag and autonomously adjusts the website layout to

<meta name="viewport" content="width=device-width,initial-scale=0"> I am facing an issue with my code not running on iPhone 6 and causing a problem with the responsiveness of my site. Any suggestions on what steps I should take? The site is constru ...

Ways to dynamically insert a new row into a table based on user input in a Postman-like reactive table

Is there a way to dynamically insert a row when a single character is entered into an input field in the header tab, similar to how Postman functions? 1) If a user types any single character in the td of the first row, then a new row should be added below ...

The received reply does not align with the set parameter configuration:

Encountering an issue with Angular $resource: error description Error: error:badcfg Response does not match configured parameter: Error in resource configuration for action `array`. Expected response to contain an object but got an {2} Initialization of ...

Conceal a division using CSS based on its data-role attribute

After extensive research, I have yet to find a solution. Let's say there is a div structured like this: div[data-role="form-footer"] What would be the most effective method for hiding it, and can it be done using CSS? I've tried the f ...

vee-validate - Standalone form validation with distinct procedures

I currently have a situation where I am dealing with two forms, each in separate steps and having their own submit button. Using $validator.validateAll() validates all the inputs on the page, but I specifically need validation for each form individually. ...

Achieving nested views functionality with various modules in AngularJS and ui-router

I am currently working on a complex AngularJS application with a large module that I am looking to break down into smaller, more manageable modules. Our main page consists of several ui-views for menu, footer, content, sidebar, etc. Each $stateProvider.st ...

A step-by-step guide on incorporating RAW css into your Jekyll website

I am experiencing an issue with loading a CSS file on my website. <link rel="stylesheet" href="/assets/css/my_file.css"> This file is located at _assets/css/my_file.css. However, when I try to load the page, the CSS file does no ...

Menu options moved to the right of the screen

I am encountering a small issue with my dropdown menu that I can't seem to solve. The first item in the dropdown menu appears correctly, but the second item is slightly shifted to the right. It seems like the margin-right applied to the link may be c ...

What is the best way to ensure that the output responds to the function?

I have a total value output that needs to decrease when a checkbox is unchecked. The current function I have for unchecking the box is not working as expected. Jquery Total value calculation: $(document).ready(function() { var initialTotal = 720; $(" ...

CDK virtual scroll problem occurs when scrolling down, items are displayed slowly and occasionally blank for a few seconds

In my project, I am utilizing Angular's virtual scroll feature. However, whenever I scroll down, the items load but flicker momentarily. I have attempted to use maxBufferPx and minBufferPx as well as adjusting positions to resolve this issue, but so ...

Utilizing PHP Variables in an External JavaScript: A Step-by-Step Guide

I am attempting to utilize an array generated in PHP within my external JavaScript. My PHP code retrieves images from a directory based on the user ID provided via URL and stores them in an array. I aim to use this array in JavaScript to create a photo sli ...

How to design 'Sliding gallery panels' using jQuery and CSS3?

Usually, I know how to start a project with tutorials or some experience, but this time I'm stuck on what to even call it. Simply defining the concept could help me search for the right resources. Here's a quick mockup I put together: I want to ...