Tips for making a customized drop-down menu using JSON format in AngularJS

This is a unique json dataset I created

 {0: {'Married Status': {'M', '', 'S'}}, 1: {'COMNCTN_IND': {'', 'OFC', 'RES', 'PGR'}}}

I attempted the following:

Code:

   <select ng-model="ddldates" ng-options="number.dates for number in dates">
        </select>

    </div>
</body>

<script>
    angular.module("myApp", [])
        .controller('myController', function ($scope, $filter) {




     $scope.dates=[{0: {'Married Status': {'M', '', 'S'}}, 1: {'COMNCTN_IND': {'', 'OFC', 'RES', 'PGR'}}}];

        });



</script>

Any suggestions on how to add a drop-down menu? Please assist me with what should be included in the ng options for my data.

javascriptangularjs

Answer №1

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

   <select ng-model="ddldates">
    <option ng-repeat="item in dates.married_status">{{item.status}}</option>
   </select>

   <select ng-model="ddldates2">
    <option ng-repeat="item in dates.COMNCTN_IND">{{item.comm_ind}}</option>
   </select>


</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.dates={};
$scope.dates.married_status =[{status:"M"}, {status:""}, {status:"S"}];
$scope.dates.COMNCTN_IND       =[{comm_ind:""}, {comm_ind:"OFC"}, {comm_ind:"RES"}, {comm_ind:"PGR"}];

console.log($scope.dates);

});
</script>
</body>
</html>

uncertain of the purpose behind your action. suggested solution:
TLDR:

$scope.dates={};
$scope.dates.married_status=[{status:"M"}, {status:""}, {status:"S"}];
$scope.dates.COMNCTN_IND=[{comm_ind:""}, {comm_ind:"OFC"}, {comm_ind:"RES"}, {comm_ind:"PGR"}];


   <select ng-model="ddldates">
    <option ng-repeat="item in dates.married_status">{{item.status}}</option>
   </select>

   <select ng-model="ddldates2">
    <option ng-repeat="item in dates.COMNCTN_IND">{{item.comm_ind}}</option>
   </select>

Complete code.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

   <select ng-model="ddldates">
    <option ng-repeat="item in dates.married_status">{{item.status}}</option>
   </select>

   <select ng-model="ddldates2">
    <option ng-repeat="item in dates.COMNCTN_IND">{{item.comm_ind}}</option>
   </select>



</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.dates={};
$scope.dates.married_status =[{status:"M"}, {status:""}, {status:"S"}];
$scope.dates.COMNCTN_IND  =[{comm_ind:""}, {comm_ind:"OFC"}, {comm_ind:"RES"}, {comm_ind:"PGR"}];

console.log($scope.dates);

});
</script>
</body>
</html>

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

Using XMLHttpRequest with gzip compression

Utilizing the request module in node.js makes it simple to create a request that can retrieve and correctly decompress compressed data from the source: var request = require('request'); var requestOptions = { url: 'http://whatever.com/g ...

javascriptnode.jsrequestxmlhttprequesthttprequest

Using jQuery to create a Select All Checkbox that toggles a specific class

I have come across similar examples in the past, but I have been unable to make it work as intended. The examples I found only use standard checkboxes. I attempted to customize the checkbox using a sprite sheet by applying a class, but I am struggling to a ...

javascriptjqueryhtmlcsscheckbox

Error: The function $translate.use is not available

I initially included the languages en, fr & nl in my app.js file. Realizing this was not a good practice, I moved the translations out of the app.js file and placed them in JSON formatted files. However, upon loading the site now, I encountered a TypeErro ...

javascriptangularjsjsoninternationalizationangular-translate

Manipulating DropDownList Attributes in ASP.NET using JavaScript

I am facing an issue with populating a Dropdownlist control on my ASCX page. <asp:DropDownList ID="demoddl" runat="server" onchange="apply(this.options[this.selectedIndex].value,event)" onclick="borderColorChange(this.id, 'Click')" onblur="bo ...

javascripthtmlasp.netajax

Creating an interactive dropdown feature using AngularJS or Ionic framework

$scope.AllCities = window.localStorage.getItem['all_cities']; <div class="row"> <div class="col"> <div class="select-child" ng-options="citie.name for citie in AllCities" ng-model="data.city"> <label&g ...

javascriptangularjshtmlionic-framework

What could be causing the issue with my hour parameter in node-cron?

Having difficulty setting up a cron job to run with node-cron every Monday at 8:30. I've tried using "30 8 * * Mon" and even "30 08 * * Mon", but it doesn't seem to work. Interestingly, "30 * * * Mon" does work and runs every hour on the 30th min ...

javascriptnode.jscroncron-tasknode-cron

What is the best method for displaying multiple slices within an SVG circle?

I'm currently working on a project involving a reactJS application. The goal is to display an svg circle that, when clicked, divides into n equal slices. I have successfully generated the individual slices with the following code: renderSlices = () ...

javascriptreactjssvgpath

Unique Symbols and Characters in JavaScript

My JavaScript code looks like this: confirm("You are selecting to start an Associate who is Pending Red (P RD) status. Is this your intent?") I am encountering a strange issue where I get an alert with special characters, even though my code does not con ...

javascriptspecial-charactersalertconfirm

How come I keep running into the "is not a function" issue when trying to use the generateRequest function with Polymer's iron-ajax

Oops, it seems like there was an error: Uncaught TypeError: this.$.ajax.generateRequest is not a function. The issue seems to be in assets-ajax.html at line 23. <dom-module id="assets-pull"> <style> </style> <template> <but ...

javascriptajaxpolymer

Ways to determine the number of duplicate items in an Array

I have an array of objects that contain part numbers, brand names, and supplier names. I need to find a concise and efficient way to determine the count of duplicate objects in the array. [ { partNum: 'ACDC1007', brandName: 'Electric&apo ...

javascriptnode.jsreactjsangulartypescript

Is there a way to connect a controller to rootDocument without using a directive?

I'm currently developing a custom plugin for bootstrapping my Angular application manually, using the document as the root. I want to attach a controller to my root without utilizing the ng-controller directive in order to create a global controller e ...

javascriptangularjs

Listen for the 'open' event on a node HTTP server

This question pertains to a previous inquiry I had about node httpServer encountering the EADDRINUSE error and moving to the next available port. Currently, my code looks like this: var port = 8000; HTTPserver .listen(port, function() { console.lo ...

javascriptnode.js

Switching images using jQuery

Issue I'm feeling overwhelmed by the abundance of JavaScript code hints and finding it difficult to determine where to begin. Any assistance would be greatly appreciated. Essentially, I have a primary full-screen background image set in the CSS on t ...

javascriptjquery

How to calculate the difference in months between two dates using JavaScript

Is there a way to calculate the number of months between two dates taking into account specific conditions, such as when the dates are not exact and may have different day counts? Here is an example using the moment library: var date1 = moment('202 ...

javascriptmomentjs

update embed - new command

My code below creates a slash command and I'm attempting to update the embed every 10 seconds. const embed = new EmbedBuilder() .setAuthor({ name: track.title, iconURL: client.user.displayAvatarURL({ size: 1024, dynamic: true }) }) .setThumbna ...

javascriptnode.jsdiscorddiscord.js

Tips for adding an accessibilityLabel to a React Native app on Android to ensure the content-desc is not left empty

As a newcomer to react native development, I am currently focused on working with Android. My goal is to add content-desc to our app so that automation can utilize it in the future. After conducting some research, I came across information about adding ac ...

javascriptandroidreactjsreact-native

Tips for modifying the input variables of the createControls function in JavaScript

I encountered an issue while working with a function createControls(){ return new THREE.TrackballControls( camera,domElement );} that was created using THREE.TrackballControls=function(object, domElement){.....} controls = createControls(camera, rende ...

javascriptresizethree.jscontrols

Toggle class to a div upon clicking menu item

Seeking assistance with jQuery to develop a video player featuring a sub menu for displaying various content options upon selection. Here is a snapshot of the frontend design: view image Upon clicking on 'video' or 'audio', a distinct ...

javascriptjqueryhtmlcss

Dynamic Variable Typing in TypeScript: Adjusting variable types on the fly

I am working with 2 variables named locals and visitants. These variables can either be of type PlayerDto or TeamDto, which will be determined by a third variable called competitor_type. If competitor_type is player, then I need to assign a list of Players ...

javascripttypescript

radio input not reflecting changes in the model

My custom directive is causing issues with updating the model when using input type=radio, although normal text types are working fine. What steps can I take to ensure that the model continues to update properly? app.directive('advformInput', f ...

angularjsangularjs-directiveangularjs-scope