如何使所选值与 AngularJS 中的选项值不同？

Question

How can I make the selected value different than the values given in options with select in AngularJS. Here is what I have now:

What I want to achieve is, to display the selected value as "EN", but the options inside to be "English", "Italian",...

Below is my HTML Code for the select element:

<select class="select-language d-md-none d-inline-block" ng-options="lang.Lang_Code for lang in languagesMenu" 
        ng-model="language" ng-change="changeLanguage()" ng-cloak>
</select>

This is my JavaScript for the languagesMenu:

// navigation languages
    $scope.languagesMenu = [
        {
            Language: "English",
            Country: "USA",
            Code: "en/us/",
            Lang_Code: "en"
        }, {
            Language: "Italian",
            Country: "IT",
            Code: "it/it/",
            Lang_Code: "it"
        }
    ]

And this is the changeLanguage function:

// change language 
    $scope.changeLanguage = function () {
        $window.open($scope.language.Code, '_self');
    }

How can I make the options to be the "Language" from the JSON array, and the selected value to be the "Lang_Code"?

Answer 1

The following snippet might help where we:

• use ng-options="item.Language for item in languagesMenu " to select which property within the languagesMenu object gets displayed
• and then we use $scope.selectedName.Code which takes the Code property from our selected object (thanks to ng-model ) to go to redirect to the relevant page

 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $window) { $scope.languagesMenu = [{ Language: "English", Code: "us/" }, { Language: "Italian", Code: "it/" }, { Language: "Chinese", Code: "cn/" } ]; $scope.changeLanguage = function() { $window.open($scope.selectedName.Code, '_self'); } });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <select ng-model="selectedName" ng-options="item.Language for item in languagesMenu " ng-change="changeLanguage()"> </select> Selected language: {{selectedName.Code }} </div>