Angular: What is the best way to populate a column in a table with individual dropdown menus in each cell, each containing unique values?

I am completely new to Angular and I am attempting to build a table to display user information.

<div ng-controller="ContactController as cc" ng-app="MyApp" id="account-settings-page">
<div class="slds manage-account-table">
<table class="slds-table slds-table--bordered slds-table--striped">
  <thead>
    <tr class="slds-text-heading--label" role="header">
      <th data-label="staffName" class="slds-is-sortable">Selected Portal User</th>
      <th data-label="title">Title</th>
      <th data-label="email">Email</th>
      <th data-label="phone">Portal Admin</th>
    </tr>
  </thead>
  <tbody ng-model="users">
    <tr ng-repeat="user in users" class="slds-hint-parent">
      <td data-label="contactName">
        <select class="slds-select" ng-model="users">
          <option value="{{user.contactName}}" ng-repeat="user in users">{{user.contactName}}</option>
        </select>
      </td>
      <td data-label="contactTitle">{{user.contactTitle}}</td>
      <td data-label="contactEmail">
        <div>{{user.contactEmail}}</div>
      </td>
      <td data-label="isPortalAdmin">
        <div class="impact-thesis-checkbox">
          <div class="slds-form--stacked">
            <div class="radio">
              <label><input type="radio" name="optradio" ng-checked="{{user.isPortalAdmin}}"></label>
            </div>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
</div>
</div>

JavaScript:

angular
.module('MyApp',[])
.controller('ContactController', function($scope) {
var self = this;
self.data = {
    "users": [{
        "userId": "001290000031Xp0",
        "userName": "Joe Salademaier",
        "contactId": "001290000031Xp0",
        "contactName": "Joe Salademaier",
        "contactTitle": "CEO",
        "contactEmail": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4d2722280d223f2a2c2324372c3924222363223f2a">[email protected]</a>",
        "isPortalAdmin": true,
        "isUser": true
    }, {
        "userId": "001290000031Xp0",
        "userName": "Anastasia Smith",
        "contactId": "001290000031Xp0",
        "contactName": "Anastasia Smith",
        "contactTitle": "CTO",
        "contactEmail": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="147567797d607c547b6673757a7d6e75607d7b7a3a7b6673">[email protected]</a>",
        "isPortalAdmin": false,
        "isUser": true
    }, {
        "userId": "001290000031Xp0",
        "userName": "Bill Salademaier",
        "contactId": "001290000031Xp0",
        "contactName": "Bill Salademaier",
        "contactTitle": "CMO",
        "contactEmail": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b494247476b44594c4a4542514a5f4244450544594c">[email protected]</a>",
        "isPortalAdmin": false,
        "isUser": true
    }, {
        "userId": "001290000031Xp0",
        "userName": "Joe Schmope",
        "contactId": "001290000031Xp0",
        "contactName": "Joe Schmope",
        "contactTitle": "VP Finance",
        "contactEmail": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="24464d4848644b5643454a4d5e45504d4b4a0a4b5643">[email protected]</a>",
        "isPortalAdmin": false,
        "isUser": true
    }, {
        "userId": "001290000031Xp0",
        "userName": "Jill Meiser",
        "contactId": "001290000031Xp0",
        "contactName": "Joe Salademaier",
        "contactTitle": "VP Marketing",
        "contactEmail": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6a080306062a05180d0b0403100b1e0305044405180d">[email protected]</a>",
        "isPortalAdmin": false,
        "isUser": true
    }, {
        "userId": "",
        "userName": "",
        "contactId": "001290000031Xp0",
        "contactName": "Rajesh Gupta",
        "contactTitle": "Developer",
        "contactEmail": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b4c6d5def4d5d8c3d5cdc79adbc6d3">[email protected]</a>",
        "isPortalAdmin": false,
        "isUser": false
    }, {
        "userId": "",
        "userName": "",
        "contactId": "001290000031Xp0",
        "contactName": "Jill Sedelmaier",
        "contactTitle": "Senior Consultant",
        "contactEmail": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4d272421210d23283b283f63223f2a">[email protected]</a>",
        "isPortalAdmin": false,
        "isUser": false
    }]
};
$scope.users = self.data.users;
});

I am struggling to populate a dropdown menu with the correct values for each user. Although I have managed to fill in the remaining columns, the first column continues to be a challenge. I have two inquiries: 1. How can I assign the proper values to the dropdown for every user? 2. How do I ensure that the row values adjust when a different user is selected?

Here is my attempt on Codepen : http://codepen.io/Gromit/pen/qbwmvZ

javascriptangularjs

Answer №1

If you're looking for help with a dropdown, you may find this resource useful: AngularJS: Get selected Text and Value of HTML Select DropDownList using ng-change. Angular's strength lies in its ability to bind data to your view dynamically. One approach could be to add a "show" flag (true or false) to the data and use ng-if="data.show" or ng-show="data.show" to filter results based on a function that changes the value of data.show according to the dropdown selection. This is just an idea and would depend on your specific design needs. Apologies if I misunderstood your requirements; clarity on what you need would be helpful...

Example snippet:

<tr>
   <td>
    <select ng-model="selectedItemVarUser" ng-options="d.userId as d.userName for d in data track by d.Id"
        ng-change="GetValue()">
    </select>
   </td>
...
</tr>

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

When using `setState()`, ensure that you are updating a component that is already mounted or in the process of mounting. If you receive this error, it

When using WebSocket to communicate with my server, I call the handleSubmit() function to send data and update my state based on the received response. Everything works fine initially. Upon calling componentWillUnmount, I stop sending data to the websocke ...

javascriptreactjs

I am facing a recurring issue where I am unable to add new libraries to my node_modules directory due to encountering the same error every time I attempt to

An error occurred after running npm audit --force, causing a dependency issue in my Node_modules 0 verbose cli C:\Program Files\nodejs\node.exe C:\Users\Jenis\AppData\Roaming\npm\node_modules\npm\bin& ...

javascriptnode.jsreact-nativenpmnode-modules

JavaScript code for initiating the npm start command

Is it possible to include the npm-start command in a JavaScript script? Requirement: Develop a JS script capable of triggering the npm-start command. Operating System: Microsoft Windows I need to turn it into a Windows service. However, in the code snip ...

javascriptnode.jsnpmnpm-start

Automated system is responsible for flagging and disabling comments

We are facing a puzzling issue at the moment. Our comments form allows users to submit their thoughts on news articles, and each submission is immediately accepted and displayed on the same page. Within each comment, there is a link that enables users to ...

javascripthtml

Eliminate a descendant of a juvenile by using the identification of that specific juvenile

Here is the current structure I'm working with: https://i.sstatic.net/TejbU.png I want to figure out how to eliminate any field that has the id 3Q41X2tKUMUmiDjXL1BJon70l8n2 from all subjects. Is there a way to achieve this efficiently? admin.databa ...

javascripttypescriptfirebasefirebase-realtime-databasefirebase-admin

What methods can be used to troubleshoot an issue of an AngularJS function not being called

I am facing an issue with a dynamic table I have created. The rows and action buttons are generated dynamically when the user clicks on the Devices accordion. However, there seems to be a problem with the function expandCollapseCurrent(). Whenever the use ...

javascripthtmljqueryangularjsajax

The Node.js JSON string displays as "[object Object]" in the output

Front End // js / jquery var content = { info : 'this is info', extra : 'more info' } $.ajax({ type: 'POST', url: '/tosave', data: content }); Node // app.js app.post('/tosave', funct ...

javascriptajaxjsonnode.js

Is it necessary for NPM to execute scripts labeled as dependencies during the npm i command execution?

When npm i is run, should it execute the scripts named dependencies? I've observed this behavior in the latest version of Node (v19.8.1) and I'm curious if it's a bug. To replicate this, follow these steps: mkdir test cd test npm init -y T ...

javascriptnode.jsnpm

Adjust the value of a JavaScript variable using Selenium

My dilemma involves a boolean JavaScript variable called foo, which is currently set to true but I need it changed to false. This particular variable has the advantage of having global scope. When using Selenium, what is the most effective method for alte ...

javascriptselenium

Trouble with VueJS refresh functionality

I am facing an issue with a method that needs to run on route load. Despite attempting to call it from the updated hook, it is not functioning as expected. Additionally, I have encountered an ESLint error. methods: { getDeals (key, cb) { this.dealsR ...

javascriptvue.jsvuejs2

Determine whether there is text present on a webpage using JavaScript

I am familiar with Python coding from selenium import webdriver driver = webdriver.Chrome() driver.get('http://WEBSITE') assert 'TEXT' in driver.page_source However, I now require the equivalent JavaScript code. ...

javascriptpythonselenium

Can you explain the concept of a TransientTransactionError within Mongoose (or MongoDB)?

Two important files in my project are server.js and db.js. The db.js file is responsible for interacting with the database using Mongoose, while server.js calls functions from db.js: var mongoose = require('mongoose'); mongoose.connect('&ap ...

javascriptnode.jsmongodbmongoose

Tips for optimizing the use of JS promises?

I'm encountering issues with implementing promises in JavaScript. There are 3 asynchronous functions that rely on each other: The functions are named func1, func2, and func3 respectively. func1 produces a single result that func2 requires. func2 a ...

javascriptpromise

React Native - Issue with array value not reflecting in Text component

import React, {useState} from 'react'; import { FlatList, Text, View} from 'react-native'; import {styles, styleBox} from './components/styles'; import Slider from '@react-native-community/slider'; export default fu ...

javascriptarraysreactjsnative

The art of properly parsing JSON in AngularJS

Still a newbie in AngularJS, but I am determined to learn. Currently, I have the following controller set up. It retrieves JSON data from a specified URL. app.controller('PortfolioItemCtrl', ['$scope', '$routeParams', &apos ...

jsonangularjs

React - the constructor binding issue with 'this' keyword

I am a beginner in React and I am learning through creating a simple test application. However, I am facing an issue with "this" binding. I set up this app package yesterday using "create-react-app", so all the necessary plugins including babel should be u ...

javascriptreactjs

The div height adjustment peculiarities in IE7 and IE8 are causing quite a stir

I recently encountered a problem with my HTML/JS code that I thought was simple. The code is designed to expand the size of a div on mouseover and then collapse it back on mouseout. Here's how the code looks: CSS: .sign-in-up { position: absolut ...

javascripthtmlcssinternet-explorer-8internet-explorer-7

Simultaneously sending jQuery.ajax data while submitting a form

I'm facing a bit of a dilemma here. I have a form with multiple fields, including one for entering links. When you input a link and click the add button, the link is added to a link_array using jQuery. My goal is to send this array through the jQuery. ...

phpjavascriptjqueryhtmlajax

``The presence of symlink leading to the existence of two different versions of React

Currently, I am working on a project that involves various sub custom npm modules loaded in. We usually work within these submodules, then publish them to a private npm repository and finally pull them into the main platform of the project for use. In orde ...

javascriptnode.jsreactjsnpmwebpack

What is the best way to determine the width of a scroll bar?

Are you familiar with any techniques that work across multiple browsers? ...

javascript