angularjs ngmodel directive with dual values

I need help with customizing my dropdown control

<div ng-repeat="prop in props" style="margin-bottom: 10px;">
  <label class="col-md-4 control-label">Property {{$index + 1}} ({{prop.Value}})</label>
  <div class="col-md-8">
    <select ng-model="gradingvalues[$index]" class="form-control">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
  </div>

Within the JavaScript code, I have initialized the gradingvalues array like this: 

$scope.gradingvalues = [];

My goal involves adding more information to the selected dropdown value, such as including the propertyID. Can I achieve this by modifying the ng-model attribute like so? 

ng-model="gradingvalues[$index, propertyID]"

Is it feasible to implement this functionality?

javascriptangularjsarraysangularjs-scope

Answer №1

When it comes to props and grading values, they will always maintain a 1:1 relationship, allowing you to conveniently use a property to store the grading values:

<div ng-repeat="prop in props" style="margin-bottom: 10px;">
  <label class="col-md-4 control-label">Property {{$index + 1}}    ({{prop.Value}})</label>
  <div class="col-md-8">
    <select ng-model="prop.gradingvalue" class="form-control">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
  </div>

Answer №2

Make a simple adjustment by changing $scope.gradingvalues = []; to using an object instead of an array:

$scope.gradingvalues = {};

Don't forget to also update your ng-model:

ng-model="gradingvalues[prop]"

This way, the "propertyID" will serve as a key with the selected value from the select element.

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

Unable to iterate through elements of a string array using PowerShell

Having trouble looping through items using PowerShell with the code below. $ipAddress = @('107.20.253.26', '107.20.178.220', '8.8.8.8') for($i=0; $i -le $ipAddress.count; $i++) { $resolve = nslookup $i | Format-list ...

arrayspowershellfor-loop

Developing a Node.js API using Express and MySQL involves utilizing the WHERE IN clause and binding parameters with multiple comma-separated values

Having a URL structure as shown below, where multiple comma-separated values can be added to the URL: localhost:4001/api/v1/users/search?title=mr,dr This is my query implementation: router.get('/search?', function(req, res, next) { var ...

javascriptmysqlsqlnode.jsexpress

Making adjustments to a JSON object before saving it to a file with Postman and Express

I have successfully created a POSTMAN call to a server that provides a JSON response containing a list of items as shown below:- { "count": 6909, "setIds": [ "1/7842/0889#001", "2/4259/0166#001", "ENT0730/0009", "9D ...

javascriptjsonexpresspostman

How to extract JSON array from JSON object in Swift 3

I'm experiencing difficulties with parsing a JSON array within JSON data because the JSON array I receive isn't always an array. The key of the array is Body based on another parameter called infoType. The value of Body can be either an array or ...

iosarraysjsonswift3

How can I use a JavaScript function to remove an element from a PHP array?

Imagine I have a PHP session array: $_SESSION[MyItems]=Array('A'=>"Apple", 'B'=>"Brownie", 'C'="Coin")) which is utilized to showcase items on a user's visited page. I want the user to have the ability to remove o ...

javascriptphparrayssession

Issue with PHP array function is that it is only showing the first element in the array while disregarding the rest

Having an issue with displaying multiple client's items in an array. My current code only shows the first item id in the array. Can you help me identify what I'm doing wrong? Check out this example of sItem value: $items = array(); $cli ...

phparrays

Retrieve the element from the most recent append() function invocation

Is it possible to change the chain context to a new DOM node when using append() to insert it? Here is an example code snippet demonstrating this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org ...

javascriptjquery

List of text elements from a singular line within a document

I am trying to extract an array of strings from a .txt file using fgets and strtok functions. However, my current implementation seems to be incorrect, and I am struggling to get the desired output. char* stringArray[numWords]; char line[] = fgets(stringA ...

carraysstringfgetsstrtok

Utilizing Selenium and Protractor for efficient text entry with the ng-model locator

I am using Selenium and Protractor to input text into text fields located by Angular locators. However, after I enter the text, the field does not immediately display the entered text until I click on it again. Essentially, it is not dynamically refreshin ...

angularjsseleniumprotractor

transferring information from a list display to a more detailed view in angular.js

My application follows the CRUD model, using separate routes and controllers for both the list view and detail views. The data displayed in the list view is fetched using a $resource. Currently, my detail view controller makes an additional http request ...

angularjs

Once you have successfully navigated past Div2, smoothly transition downwards to Div1 and transform it into a sticky

I wish to scroll down, and view #div1... also see #div2... When #div2 disappears from sight, I want #div1 to slide down and stay fixed at the top of the window. If I reach the footer div, I no longer want #div1 to remain sticky. If it's po ...

javascriptjqueryhtmlcss

Can ngFor be utilized within select elements in Angular?

I'm facing an interesting challenge where I need to display multiple select tags with multiple options each, resulting in a data structure that consists of an array of arrays of objects. <div class="form-group row" *ngIf="myData"> <selec ...

javascripthtmlangulartypescript

Stop the background from being visible using the jQuery Cycle plugin

I'm facing a challenge with the cycle plugin for jquery when creating a slideshow. The transition between slides allows what's underneath to show, but I want a smoother transition where one slide truly fades into the other without the background ...

javascriptjqueryslideshow

Python is experiencing difficulties with copying xpath elements

I attempted to utilize some Python code to access Twitter and retrieve the "Happening now" text. Unfortunately, it was unsuccessful. import webbrowser print("Visiting Twitter.com...") webbrowser.get('C:/Program Files (x86)/Google/Chrome/Application/c ...

javascriptpythonhtmlselenium

Despite the onsubmit returning false, the submit operation still goes through

I seem to have hit a roadblock yet again. My registration form incorporates three JavaScript functions which display the desired output when triggered by an onchange event within my HTML form. These functions generate a Bootstrap alert while the user is co ...

javascriptajaxforms

I am unable to fire a simple jQuery event when pressing a key until the next key is pressed

I am currently working on a project for a friend, where I have implemented a hidden text field. When the user starts typing in this field, the text is displayed in a div element to create an effect of typing directly onto the screen instead of an input fie ...

javascriptjqueryevent-handlingjquery-events

Can the value in a JavaScript object be updated dynamically when a button is clicked?

In my JavaScript code, there is an object named annualPlan. Whenever a user submits the HTML form for a specific month, I aim to update the value in the object for that particular month accordingly. For instance, if someone submits August 21 and 200, I w ...

javascripthtmlcss

AngularJS showcases the full spectrum of available methods

I am struggling to create a method for composing a URL in my class. Here is what I have attempted: The createLink method takes an ID and returns the corresponding URL: console.log("before the method"); console.log($scope.createLink ) $scope.createLink = f ...

javascriptangularjsangularjs-scope

Gatsby: A guide on inserting unadulterated HTML within the head section

Is it possible to insert raw HTML into the <head></head> section of every page in a Gatsby.js project? I need to add a string of HTML for tracking purposes, including inline and external script tags, link tags, and meta tags. For example, here ...

javascripthtmlreactjsgatsbytracking

Cookies are exclusively established in Chrome, with no presence in Safari, Mobile Chrome, or Mobile Safari

When using desktop browsers (specifically Chrome), my sign up and sign in endpoint works perfectly fine. However, I encounter a server timeout issue when attempting to sign up or sign in using a mobile browser. This problem arises from the session cookies ...

javascriptexpresscookiescross-domaincsrf