选择下拉选定的值答案

【问题标题】：Select drop-down selected value选择下拉选定的值
【发布时间】：2018-02-28 11:40:24
【问题描述】：

我在选项下拉框中有一个包含一些国家/地区代码及其全名的下拉菜单。（如下所示）

    <script>
            var app = angular.module('myApp', []);
            app.controller('myCtrl', function($scope) {
            $scope.names = ["US-United state of America", "IN-India", "UK-United Kingdom"];
            });
    </script>

而我的html部分是

    <select ng-model="selectedName" ng-options="x for x in names"></select>

好的，所以我想做的是，当我在下拉列表中选择任何下拉值时，应该只输入“US”而不输入全名。

当我将此数据保存到数据库中时，我仅从 web 服务调用中保存“美国”，但在 UI 部分我需要管理这些东西，当我编辑此记录时，应该在下拉菜单中选择“美国”而不是“美国-美利坚合众国”。

我知道这是一个奇怪的要求，但我们需要这样做:(

【问题讨论】：

标签： angularjs

【解决方案1】：

您可以拆分下拉列表中的值以删除连字符 - 之后的部分。您的名称数组将保持不变，您不必编写任何 javascript。

var app = angular.module('myApp', [])
app.controller('myCtrl', [
    '$scope',
    function($scope) {
        $scope.names = ["US-United state of America", "IN-India", "UK-United Kingdom"];
    }
])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <select ng-model="selectedName1" ng-options="x.split('-')[0] as x.split('-')[0] for x in names"></select> {{selectedName1}}
        <select ng-model="selectedName2" ng-options="x as x.split('-')[0] for x in names"></select> {{selectedName2}}
    </div>
</div>

【讨论】：

【解决方案2】：

使用过滤器

模板：

<select 
    ng-model="selectedName"
    ng-change="stripCountryName(x)"
    ng-options="x | stripCountryName for x in names">
</select>

过滤器：

app.filter('stripCountryName', function() {
    return function(name) {
        return name.split('-')[0];
    };
});

您还可以使用此过滤器在选择选项后通过将其注入控制器来修改结果：

app.controller('myCtrl', function($scope, stripCountryNameFilter) {
    $scope.stripCountryName = (option) => {
        $scope.selectedName = stripCountryNameFilter(option);
    }
})

这样，您原来的$scope.names 将始终保持不变。

【讨论】：