Question

我在选项下拉框中输入了一些国家/地区代码及其全名。（如下所示）

    <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”而没有其全名。

当我将这些数据保存到数据库中时，我仅通过webservice调用保存“US”，但在UI部分我需要管理这些内容，当我编辑此记录时，只应在Dropdown中选择“US”而不是“美国 - 美国“。

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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将始终保持不变。

选择下拉选择的值

2 个答案: