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

Posted 2023-05-09

【中文标题】如何使选定的值与 AngularJS 中的选项值不同？

【英文标题】：How to make selected value different than options value in AngularJS?

【发布时间】：2020-08-25 01:36:44

【问题描述】：

如何使选定的值与 AngularJS 中的 select 选项中给出的值不同。 这是我现在拥有的：

我想要实现的是，将所选值显示为“EN”，但里面的选项是“English”，“Italian”，...

下面是我的选择元素的 html 代码：

<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>

这是我的语言菜单的 javascript：

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

这是changeLanguage函数：

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

如何使选项成为 JSON 数组中的“语言”，而选择的值成为“Lang_Code”？

【参考方案1】：

以下 sn-p 可能对我们有所帮助：

使用ng-options="item.Language for item in languagesMenu " 选择显示languagesMenu 对象中的哪个属性 然后我们使用$scope.selectedName.Code 从我们选择的对象中获取Code 属性（感谢ng-model）重定向到相关页面

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>