Connecting AngularJS with select options

Question

Connecting AngularJS with select options

I am currently developing a checkout feature that calculates shipping prices based on the selected country. If the user picks United States, it should display US. For any other country selection, it should show Not US

While the shipping function correctly returns US when United States is selected, it still returns US even when another country is chosen.

JS

var app = angular.module("CartApp", ['ngCookies']);
app.controller("CartForm", function ($scope, $cookieStore) {
    var shipping = 0;
    $scope.shipping = function () {
        var e = document.getElementById("countries").value;
        if (e == 'United States') {
            shipping = 1;
            return "US";
        } else if (e != 'United States') {
            shipping = 4;
            return "Not US";
        }
    };
});

HTML

<div ng-app="CartApp">
    <div ng-controller="CartForm">{{shipping()}}
        <select id="countries" name="countries">
            <option selected="selected" value="United States">United States</option>
            <option value="Albania">Albania</option>
            <option value="Algeria">Algeria</option>
        </select>
    </div>
</div>

javascript angularjs select

Answer 1

Answer №1

It appears that you are attempting to combine two different data binding methods. Just starting out with AngularJS, it seems like you are following the same approach without using getElementById()

angular.module('demoApp', []).controller('DemoController', function ($scope) {
    $scope.countries = [ 'United States'
    , 
      'Albania'
    , 
      'Algeria'
    ];
    $scope.shipping = $scope.countries[0];
    $scope.isUS = function () {
        if ($scope.shipping == 'United States') {
            return 'US';
        } else {
            return 'Non US';
        }
    };
});


<body ng-app="demoApp">
    <div ng-controller="DemoController">
        <div>User selected: {{shipping}}</div>
        <div> Is US? {{isUS()}}</div>
        <select ng-model="shipping" ng-options="c for c in countries"></select>
    </div>
</body>

Answer 2

It appears that you are attempting to combine two different data binding methods. Just starting out with AngularJS, it seems like you are following the same approach without using getElementById()

angular.module('demoApp', []).controller('DemoController', function ($scope) {
    $scope.countries = [ 'United States'
    , 
      'Albania'
    , 
      'Algeria'
    ];
    $scope.shipping = $scope.countries[0];
    $scope.isUS = function () {
        if ($scope.shipping == 'United States') {
            return 'US';
        } else {
            return 'Non US';
        }
    };
});


<body ng-app="demoApp">
    <div ng-controller="DemoController">
        <div>User selected: {{shipping}}</div>
        <div> Is US? {{isUS()}}</div>
        <select ng-model="shipping" ng-options="c for c in countries"></select>
    </div>
</body>

Connecting AngularJS with select options

Answer №1

Similar questions

What is a reliable method to retrieve the text from the current LI if all LI elements in the list share the

The trio of Chrome, Windows Authentication, and XHR working together synergistically

My AngularJS module seems to be malfunctioning

Trigger a page refresh when you revisit it

Can a nodeJS script be written to automate selecting options and filling out forms in HTML?

When I try to insert LD JSON data into the script tag inside the helmet on schema.org, the google validator at validator.schema.org displays an error

Sharing data between React JS components Passing information between different components in React JS

"Troubleshooting: Child Component Not Reflecting Changes in UI Despite Using Angular

A guide on effectively utilizing the Map datatype in JavaScript

AngularJS: ng-repeat excluding duplicate keys

Having trouble with rendering components in React and Bootstrap?

Why is my AngularJS Ng-Repeat not showing the content of my array?

Retrieve data from ngModel within a custom directive

Addressing Equity Concerns within JavaScript Programming

When attempting to use JQuery autocomplete, the loading process continues indefinitely without successfully triggering the intended function

troubleshoot using Visual Studio Code

Use regular expressions to locate all closing HTML tags and all opening HTML tags individually

Running and halting multiple intervals in Javascript - a guide

Locating items within a complex array and identifying their corresponding positions

Is it necessary to perform a specific action if the text within a div matches pre