AngularJS JSON Array

I have an array containing multiple objects in JSON, as well as a select element that contains an array. Depending on the selection made in the first array, another select box will be dynamically loaded right below it.

HTML Code

<div class="list">
  <label class="item item-input item-select col col-50">
    <div class="input-label">
      Month
    </div>
    <select class="select-estado" 
            ng-model="selectedMonth" 
            ng-options="months.month for months in monthArray">
      <option value="">Select a month</option>
    </select>
  </label>
</div>



<div class="list">
  <label class="item item-input item-select col col-50">
    <div class="input-label">
      State
    </div>
    <select name="states" class="select-estado" 
            ng-model="selectedState" 
            ng-options="selectedMonth.states as states.state for states in selectedMonth.states">
      <option value="">Select a state</option>
    </select>
  </label>
</div>

Issue

Whenever I choose 2 in the select box, the generated array always selects the last element: /

Does anyone have any idea why this might be happening?

View Problem on Codepen

Answer №1

You seem to have overlooked a few angular bootstraps...

angular.module("myApp", []).controller("myCtrl", function($scope){
  ...
})

Check out this demo on codepen :

http://codepen.io/anon/pen/GJpmYv

Alternatively, I recommend exploring the free chapters on angularjs at codeschool:

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

Optimizing the If operator in JavaScript to function efficiently without causing the page to reload

While delving into jQuery and attempting to create a slider, I encountered a problem. After the slider passed through the images for the second time, the first image would not appear. My approach involved using margin-left to move the images. $(document ...

JavaScript does not recognize the $ symbol

Firebug is indicating that there is an issue with the $ variable not being defined. I have a basic index.php page that uses a php include to bring in the necessary content. The specific content causing the error is shown below: <script type="text/jav ...

Is there a way to retrieve the filename from a callback in gulp-contains?

Currently, I am utilizing gulp-contains to scan for a specific string. If the target string is found, I intend to trigger an error message stating "String found in file abc." The 'file' parameter holds the entire object comprising filename + Buff ...

Discovering the file extension and ensuring its validity when imported from Google Drive

I am facing an issue with a select tag that has 3 options: powerpoint, pdf, and spreadsheet. When uploading from Google Drive, there is no validation in place, so I can give a ppt link to the pdf option and it will still upload. Can someone help me with va ...

Encountered an error when attempting to use the 'removeChild' function on a node that is not a child of the specified node. This issue arose while interacting with an input box

I recently created a todo app with a delete functionality. However, after deleting an element successfully, I encountered an error when typing in the input box stating: Failed to execute 'removeChild' on 'Node': The node to be removed i ...

Convert image buffer to string using Mongoose getter?

I have developed a basic node backend application modeled after eBay. I am now working on creating a react frontend app to complement it. Within the app, users can list items for sale and include a photo with their listing. The item information is stored ...

Bootstrap carousel button that tracks the number of clicks

Unfortunately, I am facing a challenging issue with creating a click counter for the Bootstrap carousel button. The problem seems to be related to the span element for the previous and next icons. The button counter is not registering clicks on the respec ...

Exploring a section of a react-chartjs Pie chart

I'm currently exploring how to create a static Pie chart using react-chartjs-2. Wanting to make one slice stand out more than the others, I aim to have it appear larger: https://i.sstatic.net/rRTvN.png My focus is on accessing a specific slice in th ...

What is the best way to access a component's value from a different component in Vue script?

I have two Vue components in my PHP file: "application" and "vn" component. I am trying to fetch {{obj.vacancies_left}} from the "vn" component and use it in the "application" component. However, I keep getting an undefined variable error. I attempted to r ...

Comparison between forming JavaScript objects using arrow functions and function expressions

What is the reason behind const Todos = function () { ... } const todos = new Todos(); running smoothly, while const Todos = () => { ... } const todos = new Todos(); results in a TypeError: Todos is not a constructor error? ...

Tips on extracting the ID number prior to locating an element by its ID using Python Selenium

I am currently attempting to automate sending LinkedIn connection requests using Python with Selenium. However, I am facing an issue where the ember number value keeps changing every time I try to copy the id of the button. Sometimes it shows as #@id=" ...

The issue of empty req.body in POST middleware with Medusa.JS

Feeling completely frustrated with this issue. Grateful in advance to anyone who can lend a hand. Any insights on why req.body is showing up empty? Medusa.JS should be utilizing bodyParser by default, correct? It was functioning fine earlier today but now ...

PostgreSQL provides a single result set for each tuple retrieved

I have a unique table layout displayed below. X Y Z W dog dog2 dog3 dog4 I am looking to convert this table into a JSON format as shown below. { { "name":"X", "value":"dog", ...

Ways to incorporate md-card in AngularJS to create three distinct sections

When constructing the md-card, remember that the first section should contain a title, the second section should hold the content, and the third section needs to display the d3.js timeseries graph. ...

Tips for accessing elements using document.getElementsByTagName

Greetings and best wishes for the holiday season! I hope everyone is cozy and safe. I need a little help with some code here, as I am fairly new to JavaScript but not entirely new to programming. Despite finding an answer on this site, I am still encounter ...

I am looking to implement a permanent change using PHP Ajax

I am facing an issue with the "Add as Buddy" button on my webpage. I want it to change permanently to "Pending Request" once clicked, but it keeps reverting back to "Add as Buddy" whenever I refresh the page. Can anyone suggest a solution for this problem? ...

What is the best way to determine if my code is executing within a NodeJS environment?

I am working on a piece of JavaScript code that is specifically meant to run in NodeJS. It uses functions like require(), so running it elsewhere would cause errors. I want to add a runtime check to ensure the code is only executed within NodeJS and displa ...

Mastering the Art of Unit Testing with Angular Extensions

I am currently working with a controller that uses angular extend. How can I go about testing angular extend in this scenario? angular.module('conditionmonitor').controller('mapController', ['$scope', '$http', &apo ...

Issues encountered in loading JavaScript with jQuery script

I am facing an issue with my jQuery script not loading correctly. When I click on the calculate button, nothing happens as expected. I made sure to copy and paste jQuery directly into the file for offline use, and also created a personal console due to res ...

How can I implement a page switch in vuejs by clicking on a name in a table list?

I'm currently working on a list page in VueJS and facing some challenges. Here is the code snippet: <template> <vue-good-table :columns="columns" :rows="row" :search-options="{ ...