AngularJS在下拉列表中设置默认值

时间:2017-01-14 12:19:55

标签: javascript angularjs

我正在使用以下代码。

HTML代码

Simpleclass func1()
{
    return Simpleclass();
}

我的constant.js

<form name="profInfoForm" ng-submit="saveInfo(profInfoForm)" novalidate>
    <div class="wrapper">
        <div class="container">
            <section class="main-ctr">
                <div class="error-msg" ng-show="showErrorMsg">
                    <div class="text">Please fix the validation error(s) below and try again.<br />{{serviceErrorMsg}}</div>
                </div>
                <div ng-include="'views/header.html'"></div>
                <main class="sm-main">
                    <section class="fix-section">
                        <h1>Professional information</h1>
                        <div class="lg-form">
                            <div class="form-group">
                                <label class="text-label lg-label">Salutation</label>
                                <div class="select-wrap lg-select">
                                    <select class="form-input select" name="salutation" required ng-init="profInfo.salutation = item[0]"
                                            ng-options="item.name as item.name for item in salutations"
                                            ng-model="profInfo.salutation">
                                    </select>
                                    <div class="error" ng-show="profInfoForm.$submitted || profInfoForm.salutation.$touched">
                                        <span ng-show="profInfoForm.salutation.$error.required">Required Field</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                    <div class="clear"></div>
                    <div class="button-ctr">
                        <button class="button" ng-class="profInfoForm.$valid ? 'active' : 'disable'">Next</button>
                    </div>
                </main>
            </section>
        </div>
    </div>
    <div id="loading" ng-if="showLoader">
        <img src="images/loader.gif" id="loading-image">
    </div>
</form>

控制器代码如下所示

.constant('APP_CONSTANTS', {
    SALUTATIONS: [{ id: 0, name: 'Select' }, { id: 1, name: 'Mr.' }, { id: 2, name: 'Mrs.' }, { id: 3, name: 'Miss' }, { id: 4, name: 'Dr.' }, { id: 5, name: 'Ms'}]
})

我想设置.controller('professionalInfoCtrl', ['$rootScope', '$scope', '$state', 'globalService', 'APP_CONSTANTS', 'dataServices', function ($rootScope, $scope, $state, globalService, APP_CONSTANTS, dataServices) { $scope.showLoader = false; $scope.profInfo = userData; $scope.salutations = APP_CONSTANTS.SALUTATIONS; }]) 下拉列表的默认值。

为此,我使用Salutation,但这不起作用。我没有发现问题。

2 个答案:

答案 0 :(得分:0)

请考虑使用ui-selectAngularUI

 <ui-select ng-model="$parent.company">
       <!-- using $parent - https://github.com/angular-ui/ui-select/issues/18 -->

       <ui-select-match>{{$select.selected.name}}</ui-select-match>
       <ui-select-choices repeat="company in companies>{{company.name}}</ui-select-choices>
 </ui-select>

答案 1 :(得分:0)

我使用以下代码解决了我的问题

<select class="form-input select" ng-model="profInfo.salutation" required
    ng-options="item.name as item.name for item in salutations">
    <option value="">Select salutation...</option>
</select>
<div class="error" ng-show="profInfoForm.$submitted || profInfoForm.salutation.$touched">
    <span ng-show="profInfoForm.salutation.$error.required">Required Field</span>
</div>

我正在使用

这么简单
<option value="">Select salutation...</option>

谢谢大家。