1

我的页面上有以下 HTML，其中有 2 个select元素。我希望它们都是必需的。我希望第二个元素currentModel保持禁用状态，直到使用除 之外的值选择第一个元素Year，这是我的默认值。

<select class="form-control  input-xsmall select-inline" data-ng-model="currentYear" >
    <option>Year</option>
    <option ng-repeat="year in years" value="{{year}}">{{year}}</option>
</select>
<select  class="form-control  input-xsmall select-inline" data-ng-model="currentModel">
    <option>Model</option>
    <option ng-repeat="model in models" value="{{model.niceName}}">{{model.name}}</option>
</select>

有人可以帮助我如何验证这样的选择元素吗？

4

2 回答 2

1

ng-disabled="currentYear == -1"通过执行选择您的默认值$scope.currentYear = -1 如果 currentYear 模型值为“-1”，这将禁用第二个选择框

<select class="form-control  input-xsmall select-inline" data-ng-model="currentYear" >
    <option value="-1">Year</option>
    <option ng-repeat="year in years" value="{{year}}">{{year}}</option>
</select>
<select  class="form-control  input-xsmall select-inline" data-ng-model="currentModel"
    ng-disabled="currentYear == 'Year'">
    <option>Model</option>
    <option ng-repeat="model in models" value="{{model.niceName}}">{{model.name}}</option>
</select>

这是 Plunkr 示例：http ://plnkr.co/edit/LIAqMq4TEz9xOCUGPAUs?p=preview

于 2014-08-27T03:08:03.153 回答
1

您只需要使用 ng-model 而 ng-options不是通过ng-repeat. 让 Angular 为您创建选项。

<select class="form-control  input-xsmall select-inline" data-ng-model="currentYear"
          ng-options="year for year in years track by year">
    <option value="">Year</option>
</select>

<select  class="form-control  input-xsmall select-inline" data-ng-model="currentModel" 
   ng-disabled="!currentYear" 
   ng-options ="model.niceName as model.name for model in models track by model.niceName">
    <option value="">Model</option>
</select>

PLNKR

  • ng-options="year for year in years track by year"遵循语法label for value in array

  • ng-options ="model.niceName as model.name for model in models track by model.niceName"遵循语法select as label for value in array

  • 只需ng-model为两个选择设置 。在模型的情况下，因为我使用了select as语法 ( model.niceName as model.name)，所以currentModel将具有niceName所选项目的属性。如果您select as从模型中删除部分，它将具有相应的模型对象。

  • 根据值在第二次选择上设置 ng-disabledcurrentModel

因为在处理对象时，ng-select 有一个错误跟踪，我们需要使用as语法

于 2014-08-27T03:08:05.163 回答