Adding choices to dropdown menu in AngularJS

Question

Adding choices to dropdown menu in AngularJS

As a beginner in AngularJs, I am struggling with appending options to select boxes created by javascript. Below is the code snippet that is causing the issue.

var inputElements = $('<div><label style="float:left;">' + i + '</label><select ng-model="object" class="form-control sel" style="width:300px; float:right; margin-right:75px;"> <option>select</option></select></div></br></br>');
var temp = $compile(inputElements)($scope);
$('#projOrder').append(temp);
$scope.object = object;
//for(var opt=0; opt<selOptLabels.length; opt++) {
$('.sel').append('<option ng-repeat="obj in object" value="'+
{{obj.value}}+'">'+{{obj.value}}+'</option>');

I encountered this error message: "SyntaxError: invalid property id"

Greetings, here is an example of some JSON data. This is just a snippet from my larger dataset.

    "ProjectOrder": {
"Connect direct required": {
  "value": "N",
  "id": "STR_15523_62"
},
"Cores": {
  "value": ".5",
  "id": "NUM_15523_50"
},
"Permanent data in GB": {
  "value": "100",
  "id": "NUM_15523_56"
},
"Description": {
  "value": "AZBNL azbngb",
  "id": "STR_15523_2"
},
...
"WORK data in GB": {
  "value": "100",
  "id": "NUM_15523_55"
}

}

Now, my task is to generate input fields and dropdown menus (if applicable) using the provided JSON data.

javascript angularjs json

Answer 1

Answer №1

Constructing HTML manually like this is not recommended. It's better to utilize a template and delegate the heavy lifting to the template engine.

I observed that you are using object as the ng-model. It would be more appropriate to have a separate variable to store the selected value.

Here is an improved approach for achieving this in an .html file:

<div ng-repeat="object in listOfObjects"
    <label style="float: left">{{ $index }}</label>
    <select ng-model="selectedValues[$index]" class="form-control sel"
        style="width:300px; float:right; margin-right:75px;"
        ng-options="obj.value for obj in object"></select>
</div>

Then, in your JavaScript controller:

// array to hold selected values
$scope.selectedValues = new Array(list.length);
// list of objects
$scope.listOfObjects = list;

This may not be the most elegant solution, but essentially, I've created an array with the same length as the list of objects. In Angular templates, within an ng-repeat, $index is a special variable that keeps track of the current index in the loop.

Hence, when a user modifies the selected value of the 3rd select box (index 2), $scope.selectedValues[2] will capture the chosen option.

EDIT: Converting JSON to an array example:

var list = Object.keys(json).map(function(jsonKey) {
    return {
        name: jsonKey,
        label: json[jsonKey].label,
        value: json[jsonKey].value
    };
});`

Answer 2

Constructing HTML manually like this is not recommended. It's better to utilize a template and delegate the heavy lifting to the template engine.

I observed that you are using object as the ng-model. It would be more appropriate to have a separate variable to store the selected value.

Here is an improved approach for achieving this in an .html file:

<div ng-repeat="object in listOfObjects"
    <label style="float: left">{{ $index }}</label>
    <select ng-model="selectedValues[$index]" class="form-control sel"
        style="width:300px; float:right; margin-right:75px;"
        ng-options="obj.value for obj in object"></select>
</div>

Then, in your JavaScript controller:

// array to hold selected values
$scope.selectedValues = new Array(list.length);
// list of objects
$scope.listOfObjects = list;

This may not be the most elegant solution, but essentially, I've created an array with the same length as the list of objects. In Angular templates, within an ng-repeat, $index is a special variable that keeps track of the current index in the loop.

Hence, when a user modifies the selected value of the 3rd select box (index 2), $scope.selectedValues[2] will capture the chosen option.

EDIT: Converting JSON to an array example:

var list = Object.keys(json).map(function(jsonKey) {
    return {
        name: jsonKey,
        label: json[jsonKey].label,
        value: json[jsonKey].value
    };
});`

Answer 3

Answer №2

There are multiple reasons why that approach may not be effective. The code provided is flawed due to the template brackets being appended to the HTML string...

$('.sel').append('<option ng-repeat="obj in object" value="' +{{obj.value}}+'">'+{{obj.value}}+'</option>');

Is there a specific rationale behind constructing your markup in JavaScript?

It's generally recommended to avoid using jQuery within Angular controllers. If jQuery is loaded, the jQuery object can be accessed via angular.element, otherwise Angular utilizes jQuery light.

Instead of delving into other issues here, I have prepared a simple example showcasing how a select element functions in Angular:

https://codepen.io/parallaxisjones/pen/BRKebV

Furthermore, it would be beneficial to refer to the Angular documentation prior to asking queries on platforms like Stack Overflow. The documentation includes a clear demonstration of utilizing ng-repeat within a select element. https://docs.angularjs.org/api/ng/directive/select

EDIT: My codepen has been updated with an illustration of fetching JSON data through an HTTP GET request

EDIT: The codepen has been revised with an example of iterating over an object using (key, value) syntax within ng-repeat for JSON data

Answer 4

There are multiple reasons why that approach may not be effective. The code provided is flawed due to the template brackets being appended to the HTML string...

$('.sel').append('<option ng-repeat="obj in object" value="' +{{obj.value}}+'">'+{{obj.value}}+'</option>');

Is there a specific rationale behind constructing your markup in JavaScript?

It's generally recommended to avoid using jQuery within Angular controllers. If jQuery is loaded, the jQuery object can be accessed via angular.element, otherwise Angular utilizes jQuery light.

Instead of delving into other issues here, I have prepared a simple example showcasing how a select element functions in Angular:

https://codepen.io/parallaxisjones/pen/BRKebV

Furthermore, it would be beneficial to refer to the Angular documentation prior to asking queries on platforms like Stack Overflow. The documentation includes a clear demonstration of utilizing ng-repeat within a select element. https://docs.angularjs.org/api/ng/directive/select

EDIT: My codepen has been updated with an illustration of fetching JSON data through an HTTP GET request

EDIT: The codepen has been revised with an example of iterating over an object using (key, value) syntax within ng-repeat for JSON data

Adding choices to dropdown menu in AngularJS

Answer №1

Answer №2

Similar questions

Show real-time server responses using jQuery while waiting for the AJAX request to complete

Picking and modifying a newly added HTML input element using Jquery

Mapping responses with objects in Spring Boot Api Client involves a sophisticated process that aims to convert list of objects into individual objects for better

Exploring Angular UI Router Testability Through Resolve

Is there a way to convert an empty string to zero in MySQL?

Incomplete data was retrieved from the localStorage

Direct users to a different page upon reloading the page in Django

Exclude the file and directory patterns from being watched with PM2: ignore folder

Using AngularJS to Nest ng-view within ng-repeat

What is the best way to run a lengthy task in Node.js by periodically checking the database for updates?

Is there a way to retrieve data from both JSON and a file simultaneously?

The Axios post request is mistakenly sending my data as the key with an empty value instead of sending the entire data object itself

Custom variables can be passed to subscription buttons through Paypal

Unable to Click on Selenium Element

JQuery fails to remove the "display:hidden" attribute

Having difficulty launching a new window within an app built with Electron and Nexjs (Nextron)

Is there a way to exclusively use ES6 to import jQuery from an npm package?

There was an issue with the specified entry-point "auth0/angular-jwt" as it is missing required dependencies

Attempting to use insertAdjacentHTML on a null property results in an error

Unable to generate two tables