What could be causing the drop-down values to fail to be saved?

I'm dealing with an address object that has nested objects for both permanent and postal addresses. Despite successfully saving the values of input boxes in a large form, I'm facing an issue with not being able to save the dropdown (select) values. Can someone help me identify what I might be missing?

index.view.html

 <div class="form-group" ng-class="{ 'has-error': form.address.$dirty && form.address.$error.required }">
    <label for="address" class="col-sm-2 control-label">Address</label>
    <div class="col-sm-5">
        <label style="padding-top:8px">Permanent Address</label><br>

        <textarea rows="5" cols="50" maxlength = "100" type="text" placeholder="Address Line1" class="form-control" ng-model="address.permanent.line1" ng-change="sameAsPermanent && update()" required> </textarea><br>

        <select class="form-control" ng-model="address.permanent.countryName" ng-options="country._id as country.countryName for country in countries" ng-change="sameAsPermanent && update()"></select><br>
        <select class="form-control" ng-model="address.permanent.countryCode" ng-options="country._id as country.countryCode for country in countries" onkeypress='return event.charCode >= 48 && event.charCode <= 57' ng-change="sameAsPermanent && update()"></select><br>
        <select class="form-control" ng-model="address.permanent.stateName" ng-options="country._id as country.stateName for country in countries" ng-change="sameAsPermanent && update()"></select><br>

        <select class="form-control" ng-model="address.permanent.city" ng-options="country._id as country.city for country in countries" ng-change="sameAsPermanent && update()"></select><br>

        <input type="text" class="form-control"  placeholder="Area" ng-model="address.permanent.locations.Area" ng-change="sameAsPermanent && update()" required><br> 
        <input type="text" class="form-control"  placeholder="Zip/Postal code" ng-model="address.permanent.locations.pincode" ng-change="sameAsPermanent && update()" required><br> 

    </div>

    <div class="col-sm-5">
        <label style="padding-top:8px">Postal Address</label>&nbsp;&nbsp;<input type="checkbox" ng-model="sameAsPermanent" ng-change="sameAsPermanent && update()">Same<br>
        <textarea rows="5" cols="50" maxlength = "100" type="text" placeholder="Address Line 1" class="form-control" ng-model="address.postal.line1" ng-disabled="sameAsPermanent" required> </textarea><br>                     

        <select class="form-control" ng-disabled="sameAsPermanent" ng-model="address.postal.countryName" ng-options="country._id as country.countryName for country in countries"></select><br>
        <select class="form-control" ng-disabled="sameAsPermanent" onkeypress='return event.charCode >= 48 && event.charCode <= 57' ng-model="address.postal.countryCode" ng-options="country._id as country.countryCode for country in countries"></select><br>
        <select ng-disabled="sameAsPermanent" class="form-control" ng-model="address.postal.stateName" ng-options="country._id as country.stateName for country in countries"></select><br>
        <select class="form-control" ng-disabled="sameAsPermanent" ng-model="address.postal.city" ng-options="country._id as country.city for country in countries"></select><br>
        <input type="text" class="form-control"  ng-disabled="sameAsPermanent" placeholder="Area" ng-model="address.postal.locations.Area" required><br> 
        <input type="text" class="form-control"  ng-disabled="sameAsPermanent" placeholder="Zip/Postal code" ng-model="address.postal.locations.pincode" required><br>                  
    </div>
</div>

index.controller.js

$scope.address={
    permanent:{
    },
    postal:{
    }
};

$http.get('http://student.herokuapp.com/address')
.success(function(response){

    // $scope.countries=response.address.countryName;

    countryLen=response.address.length;
    console.log(countryLen);

    for(var i=0;i<countryLen;i++){

        $scope.countries.push({ "countryName":response.address[i].countryName,
           "countryCode":response.address[i].countryCode,
           "stateName": response.address[i].states[i].stateName,
           "city": response.address[i].states[i].cities[i].city
       });
    }
});

$scope.save  = function() { 

    $http.put('https://student.herokuapp.com/personalInfo', {
        "name" : $scope.name,
        "dob" : $scope.dob,
        "gender" : $scope.gender,
        "address" : {
            "permanent" : {
                "line1" : $scope.address.permanent.line1,
                "zip" : $scope.address.permanent.locations.pincode, 
                "state" : $scope.address.permanent.stateName,
                "Country" : $scope.address.permanent.countryName
            },
            "postal" :    {
                "line1" : $scope.address.postal.line1,
                "zip" : $scope.address.postal.locations.pincode, 
                "state" : $scope.address.postal.stateName, 
                "Country" : $scope.address.postal.countryName
            }
        }
    ).success(function(response)
});

    **Address Json array**

 "address": {
  "permanent": {
    "line1": "MG Road",
    "zip": 403404,
    "state": "Goa",
    "Country": "Panjim"
  },
  "postal": {
    "line1": "MG Road 2",
    "zip": 403404,
    "state": "Goa",
    "Country": "Panjim"
  }

Answer №1

Here is the syntax for adding ng-options:

country.countryName as country.countryName for country in countries

Check out this example code snippet for the permanent address section:

<select class="form-control" ng-model="address.permanent.countryName" ng-options="country.countryName as country.countryName for country in countries" ng-change="sameAsPermanent && update()"></select><br>
                      <select class="form-control" ng-model="address.permanent.countryCode" ng-options="country.countryCode as country.countryCode for country in countries" onkeypress='return event.charCode >= 48 && event.charCode <= 57' ng-change="sameAsPermanent && update()"></select><br>
                      <select class="form-control" ng-model="address.permanent.stateName" ng-options="country.stateName as country.stateName for country in countries" ng-change="sameAsPermanent && update()"></select><br>
<select class="form-control" ng-model="address.permanent.city" ng-options="country.city as country.city for country in countries" ng-change="sameAsPermanent && update()"></select><br>

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

Spacing the keyboard and input field in React Native

Is there a way to add margin between the input and keyboard so that the bottom border is visible? Also, how can I change the color of the blinking cursor in the input field? This is incorrect https://i.sstatic.net/Jsbqi.jpg The keyboard is hidden https: ...

Echarts: Implementing a Custom Function Triggered by Title Click Event

I recently created a bar graph using Echart JS, but I'm struggling to customize the click event on the title bar. I attempted to use triggerEvent, but it only seems to work on statistics rather than the title itself. JSFiddle var myChart = echarts.i ...

ES6 Set enables the storage of multiple occurrences of arrays and objects within

Review the script below. I'm currently testing it on Chrome. /*create a new set*/ var items = new Set() /*add an array by declaring its type as an array*/ var arr = [1,2,3,4]; items.add(arr); /*display items*/ console.log(items); // Set {[1, 2, 3, ...

Encountering a problem with integrating Vue js and making a jquery

Hello there! I'm currently working on fetching data through ajax and utilizing a vue wrapper component. Here's the code snippet I'm using: <html> <head> <title>title</title> <meta charset="UT ...

What drawbacks come with developing an Express.js application using TypeScript?

Curious about the potential drawbacks of using TypeScript to write Express.js applications or APIs instead of JavaScript. ...

What are the steps to set up ChartJS on a personal computer?

Currently, I am working on creating charts with ChartJS using the CDN version. However, I would like to have it installed directly on my website. After downloading ChartJS v4.1.1, I realized that it only contains typescript files. Since I cannot use TS fil ...

AngularJS ui-select does not provide a clear indication to the user that they need to input more characters in order

Is there a pre-made extension or built-in feature for angularJS's ui-select (select2 theme) that prompts users to input more characters in order to display search results when the minimum-input-length=3 option is set? I'm looking for something si ...

The hook call you made in next.js/react is invalid and cannot be

I recently followed a tutorial on creating a hamburger menu in react/next.js. You can check out the tutorial here. import { useState } from "react"; import user from '../styles/userview.module.css' export function PageHeader() { con ...

Having trouble with Angular ngRoute functionality?

I'm currently working on configuring a basic Angular app. Here is my main HTML: <html ng-app="CostumerApp"> <head> <title> Customers </title> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstr ...

Some images fail to load on Ember in the production environment

I am facing an issue with my Ember-cli 1.13 application where all images are loading correctly except those in a specific component. The component is named "list-item" and is defined as follows: {{list-item url="list-url" name="List Name" price="240"}} I ...

Incorporate a link to an image following a click event toggle using Jquery

I managed to create a code snippet that toggles between two images when clicked, thanks to some assistance from stackoverflow. However, I am now looking to add a link to the second image that redirects users to another webpage, like The App Store. My ques ...

Scroll indefinitely, obliterate and regenerate elements as you scroll

I have a unique issue that I need advice on from experts in this field. On my website, I have a Tree with infinite scroll functionality. The tree's image is iterative and the number of iterations depends on the data source provided. The data source ...

Steps for mocking an async action creator in Redux using Jest

I am currently working on writing a unit test for a redux async action creator using jest. asyncActions.js: const startSignInRequest = () => ({ type: START_SIGNIN_REQUEST }); // this is the action creator for successfully signing in a user export c ...

Encountering a JSLint error while attempting to import the 'aws-amplify' package in my main file

Recently, I installed the latest version of aws-amplify using npm. After running npm init with 'entryPoint.js' as the entrypoint file, I encountered an issue when pasting the following code at the top of entryPoint.js: import Amplify, {Auth} from ...

What methods with JavaScript, Ajax, or jQuery can I apply to populate the student details?

For completing the StudentID section, please fill out the form data.cfm with the first name, last name, and Middle Name. <script language="Javascript"> $(function() { $( '#effective_date' ).datepicker(); jQuery.validator.addMetho ...

Setting up a basic testcafe configuration with ES modules

Unique Title When it comes to using ES modules with Testcafe, the documentation may not provide clear instructions on configuring global hooks. There seems to be limited options for configuring Testcafe globally, such as using .json or CommonJS. In my pr ...

Will other functions in the file run if only a single function is imported?

The file bmiCalculator.ts contains the following code: import { isNotNumber } from './utils'; export default function calculateBmi(height: number, weight: number) { const bmi = weight / Math.pow(height / 100, 2); if (bmi < 18.5) { re ...

Javascript keycode used to target the element when a key is pressed

In my current project, I am utilizing a code snippet to attach a KeyDown event handler to any element within the HTML form. for(var i=0;i<ele.length;i++) { ele[i].onkeydown = function() { alert('onkeydown'); } } I am ...

What kind of data type should the value property of Material UI TimePicker accept?

While reviewing the documentation, I noticed that it mentions any, but there is no clear indication of what specific data types are supported. The value sent to the onChange function appears to be an object rather than a Date object, and in the TypeScrip ...

Looking to add a close button to the iFrame, but having trouble getting it to function when clicked

In my project built with Meteor, I have integrated an iframe to display specific content to the user. The iframe is functioning as expected, but I am looking to add a close button that will effectively unload the iframe when clicked. I attempted to imple ...