AngularJS：在選擇菜單上顯示不同的值？

我有一個顯示美國州的菜單供用戶選擇。在彈出的菜單中，我想要顯示2個字母的狀態碼以及狀態名稱，但一旦狀態爲，用戶選擇了，我只想顯示2個字母的代碼。AngularJS：在選擇菜單上顯示不同的值？

我的菜單是

<select ng-model="ctrl.user.state" name="state" 
     ng-options="option.code + ' - '+ option.name for option in ctrl.state.options | orderBy: 'name' track by option.code" 
     class="form-control" required></select>

，顯示在給我的JSON數據，結構化的（部分）格式CT - Connecticut狀態：

{ 
    "name": "Connecticut", 
    "code": "CT" 
},

來源

2017-07-25 Steve

我希望這是接近你想要什麼。我在options數組上使用了更多屬性，並在ng-change上更改文本。

http://jsfiddle.net/KN9xx/1433/

HTML

<div ng-app="myapp"> 
    <div ng-controller="FirstCtrl"> 
    <select ng-model="selectedValue" name="state" 
     ng-options="option.code as option.code + option.nameTemplate for option in options" ng-change="changeText(selectedValue)" 
     class="form-control" required></select> 
    </div> 
</div>

var myapp = angular.module('myapp', []); 
myapp.controller('FirstCtrl', function ($scope) { 
    $scope.options = [ 
     { 
     "name": "Connecticut", 
     "nameTemplate": "- Connecticute", 
     "code": "CT" 
     }, 
      { 
     "name": "Connecticut", 
     "nameTemplate": "- Connecticute", 
     "code": "AB" 
     } 
    ]; 


    $scope.selectedValue = ""; 

    $scope.changeText = function(selectedValue) { 
     for(var i = 0, m = $scope.options.length; i < m; i++) { 
     if($scope.options[i].code === selectedValue) { 
      $scope.options[i].nameTemplate = ""; 
     }else { 
      $scope.options[i].nameTemplate = " - " + $scope.options[i].name; 
     } 
     }  
    } 
});

肯定是有一些改善的代碼，但這個想法是改變在NG選項的文本。讓我知道如果你有任何問題:)

來源

2017-07-25 21:58:14

AngularJS：在選擇菜單上顯示不同的值？

回答

相關問題