下拉列表中的第一个选项未在Angular应用程序中被选中

时间:2016-06-12 18:38:36

标签: angularjs drop-down-menu angularjs-ng-repeat angularjs-model

我在html模板中有以下下拉列表。

    <div class="row">
        <label class="text-label hint--top-right hint--large" data-hint="{{customer.config.METHOD.DESCRIPTION}}">Calculation Method</label>
        <div class="input-select">
            <select class="input-select__select" ng-model="customer.attributes.tradingParameters.method">
                <option ng-repeat="indicator in customer.config.METHOD.VALUE" ng-selected="customer.attributes.tradingParameters.method == customer.shortenIndicator(indicator)" ng-value="customer.shortenIndicator(indicator)">{{indicator}}</option>
            </select>
        </div>
    </div>

我正在使用ng-repeat从CONSTANT配置文件生成下拉列表。以下是配置文件。

    vm.config = {
        'METHOD': {
            'VALUE': ['N - No', 'Y- Yes'],
            'Description': 'Some description while hovering over'
        }
    }

在有效响应中,我将带有指示符的响应对象分配给控制器中的 atrributes 属性。然后使用ng-model选择合适的值。 然而,扭曲是,服务器只发送一个字母指示符,而在下拉列表中我必须有一些指示符,如“N - 否”。

所以我添加了一个ng-selected表达式,用于比较服务器返回的指示符和缩短版本。缩短版本是通过调用控制器中的 shortenIndicator 方法创建的,该方法在第一次出现空格时拼接指示符。

    vm.shortenIndicator = function(fullIndicatorValue){
        return fullIndicatorValue.slice(0, fullIndicatorValue.indexOf(' '));
    };

所以这是一种奇怪的行为,其中只有下拉列表中的第一个选项在从服务器返回时未被选中。但是,如果服务器发送第二个或第三个选项,它将被选中。

0 个答案:

没有答案