Question

此问题仅适用于AngularJS 1.6.5及更高版本，不适用于任何先前版本。

我的表单包含一些ng-options选项和一些文本输入。当用户选择None / Custom选项时，右侧会显示文本输入。用户开始输入该输入后，将取消选择None / Custom选项并添加新的unknown选项。

这是AngularJS 1.6.5中引入bug fix的结果。以前，当用户输入输入时，None / Custom选择仍处于选中状态。

我的问题是：如何重新创建1.6.5之前的原始行为？

要查看我正在谈论的内容的示例，请查看这两个小提琴。第一个小提示演示了原始行为，第二个演示了当前（不需要的）行为。只需选择None / Custom选项，然后在相邻的文本输入中键入内容即可。

示例小提琴

AngularJS 1.6.4 example (good)

AngularJS 1.6.5 example (bad)

HTML code：

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js" type="text/javascript"></script>
    </head>
    <body ng-app="myapp">    
        <div class="wrapper" ng-controller="someCtrl">
            <div class="row" ng-repeat="t in utmTags">
                <div class="col-xs-1"><label style="color:#666;">{{t}}</label></div>

                <div class="col-xs-2">
                    <select class="form-control flat inline-dropdown skinny" ng-options="o.value as o.key for o in utmOptions" ng-model="company[t]">
                        <option ng-value="company[t]" label="None / Custom"></option>
                    </select>
                </div>

                <div class="col-xs-2">
                    <input type="text" class="form-control flat skinny" style="width:180px;" placeholder="Add tag, without spaces" ng-if="!utmVariables.includes(company[t])" ng-model="company[t]" ng-pattern="utmRegex" />
                    <div ng-if="utmVariables.includes(company[t])">e.g. {{utmOptionsExamples[company[t]]}}</div>
                </div>
            </div>
        </div>
    </body>
</html>

Javascript代码：

var app = angular.module('myapp', ['ui.bootstrap']);

app.controller('someCtrl', ['$scope', function($scope) {
    $scope.utmOptions = [
        { key: '{AmbassadorFirstNameLastInitialID}', value: '{AmbassadorFirstNameLastInitialID}' },
        { key: '{AdminFirstNameLastInitial}', value: '{AdminFirstNameLastInitial}' },
        { key: '{ContentDomain}', value: '{ContentDomain}' },
        { key: '{ShareDate}', value: '{ShareDate}' },
        { key: '{ShareID}', value: '{ShareID}' },
        { key: '{SocialPlatform}', value: '{SocialPlatform}' }
    ];
    $scope.utmOptionsExamples = {
        '{AmbassadorFirstNameLastInitialID}': 'TracJ-1318',
        '{AdminFirstNameLastInitial}': 'ShanA',
        '{ContentDomain}': 'entrepreneur.com',
        '{ShareDate}': '2017-08-23',
        '{ShareID}': '79131',
        '{SocialPlatform}': 'Twitter'
    };
    $scope.utmRegex = /^[a-z0-9\-\._]*[\{\}]{0}$|^{[a-z0-9\-\._]*}$/i;
    $scope.utmTags = ['utm_medium', 'utm_source', 'utm_campaign', 'utm_term', 'utm_content'];
    $scope.utmVariables = ['{AmbassadorFirstNameLastInitialID}', '{AdminFirstNameLastInitial}', '{ContentDomain}', '{ShareDate}', '{ShareID}', '{SocialPlatform}'];
    $scope.company = {
        utm_medium: undefined,
        utm_source: undefined,
        utm_campaign: undefined,
        utm_term: undefined,
        utm_content: undefined
    }
}]);

app.run();

当用户输入更改时，AngularJS从选择中选择默认选项

0 个答案: