Question

您好我正在开发angularjs中的Web应用程序。我有一个下拉列表。以下是我的下拉代码。

 <div class="inputblock" ng-class="{ 'has-error' : ((form2.$submitted && form2.period.$invalid)  || (form2.period.$invalid && form2.period.$dirty))}">
   <div>
   <span class="ang-error" style="color:#fff" ng-show="form2.period.$dirty && form2.period.$invalid">Select service</span>
   </div>
   <select class="with-icon"  ng-model="user.period" name="period" id="period" ng-options="user.ID as user.period for user in periodList" required>
   <option value="" label="{{ 'Period' | translate }}">{{ 'Period' | translate }}</option>
   </select>
   </div>

以下是我的js代码。

  $scope.periodList = [{ id: 1, period: '1 Month' }];

我面临着多个问题。默认情况下，当页面加载时，第一个值将绑定，但我想显示Period。我不确定为什么会这样当我选择一些值时，我可以看到无效并触发错误消息。我从浏览器中捕获了以下代码。

  <select class="with-icon ng-invalid ng-invalid-required ng-touched ng-dirty" ng-model="user.period" name="period" id="period" ng-options="user.ID as user.period for user in periodList" required=""><option value="" label="Period" class="ng-binding" selected="selected">Period</option><option value="undefined:undefined" label="1 Month" selected="selected">1 Month</option></select>

我知道上面的下拉列表我做错了什么。任何帮助，将不胜感激。谢谢。

Answer 1

在您的控制器中

$scope.items = [{
      id: 1,
      label: 'aLabel'
    }, {
      id: 2,
      label: 'bLabel'
    }];

    $scope.selected = $scope.items[0];

在模板中，如果你有bootstrap使用同一个类，否则你可以创建自己的类

<form name="abcd" novalidate>
    <div class="form-group" ng-class="{'has-error': abcd.select.$dirty && abcd.select.$invalid }">
    <select name="select" ng-options="item as item.label for item in items track by item.id" ng-model="selected" required></select>
    </div>
    <div ng-messages="abcd.select.$dirty && abcd.select.$error">
        <div ng-messages="required">This is required</div>
    </div>
</form>

Answer 2

更改您的选择。 id是您必须从$scope.periodList

引用的关键

 <select class="with-icon"  ng-model="user.period" name="period" id="period" ng-options="user.id as user.period for user in periodList" required>

Angularjs下拉列表验证无效

2 个答案: