需要在 Angular 中制作下拉指令答案

【问题标题】：Making dropdown directive in Angular required需要在 Angular 中制作下拉指令
【发布时间】：2016-03-26 15:46:07
【问题描述】：

我已经在 Angular 中编写了我的第一个指令，它是一个下拉菜单，这里是模板：

<select class='form-control' ng-model='vm.scope.fixtureToBeUpdated.awayTeam' ng-options='awayTeam.teamName for awayTeam in vm.scope.awayTeams track by awayTeam.teamId' required>
    <option style='display: none' value=''>{{'SELECT' | translate }}</option>
</select>

这是在控制器中定义的地方：

function awayTeamsDropdown() {

        return {
            restrict: "E",
            scope: true,
            controller: "fixturesController",
            templateUrl: "/views/awayteamsDropdown.html"
        };
    }

这是它的使用形式：

<form novalidate id="AddUpdateFixture" name="AddUpdateFixture" ng-submit="vm.addUpdateFixture()">

                        <!--addFixture or updateFixture-->
                        <div class="form-group">
                            <input type="hidden" ng-model="vm.scope.fixtureToBeUpdated.fixtureId"/>
                        </div>
                        <div class="form-group">
                            <label for="tournament">{{ 'TOURNAMENT' | translate }}</label>
                            <tournaments-dropdown></tournaments-dropdown>
                        </div>
                        <div class="form-group">
                            <label for="week">{{ 'WEEK' | translate }}</label>
                            <weeks-dropdown></weeks-dropdown>
                        </div>
                        <div class="form-group">
                            <label for="awayTeamName">{{ 'AWAY_TEAM' | translate }}</label>
                            <awayteams-dropdown></awayteams-dropdown>
                        </div>
                        <div class="form-group">
                            <label for="awayTeamScore">{{ 'POINTS' | translate }}</label>
                            <input id="awayTeamScore" type="text" class="form-control" name="awayTeamScore"
                                   ng-model="vm.scope.fixtureToBeUpdated.awayTeamScore" ng-min="0" ng-max="77" />
                            <span ng-show="AddUpdateFixture.awayTeamScore.$dirty && AddUpdateFixture.awayTeamScore.$error.min" class="text-warning">{{ 'SCORE_MIN' | translate }}</span>
                            <span ng-show="AddUpdateFixture.awayTeamScore.$dirty && AddUpdateFixture.awayTeamScore.$error.max" class="text-warning">{{ 'SCORE_MAX' | translate }}</span>
                        </div>

                        <div class="form-group">
                            <button type="submit" ng-disabled="AddUpdateFixture.$invalid" class="button bg-darkBlue bg-active-darkBlue fg-white">{{ 'SAVE' | translate }}</button>
                        </div>
                    </form>

但在 ng-disabled 形式的按钮中，即使未从下拉列表中选择项目，也会将其设置为 false。如果下拉菜单中未选择任何内容，如何将 ng-disabled 设置为 true？

【问题讨论】：

基于this answer，您似乎必须编写一些代码来手动设置验证属性。
required on custom directive select的可能重复
关于在这种情况下如何应用该示例的任何指示？

标签： javascript angularjs angular-directive

【解决方案1】：

试试这个

 <div class="form-group">
    <button type="submit" ng-disabled="vm.scope.fixtureToBeUpdated.awayTeam === undefined" class="button bg-darkBlue bg-active-darkBlue fg-white">{{ 'SAVE' | translate }}</button>
 </div>

或者

ng-disabled="!vm.scope.fixtureToBeUpdated.awayTeam"

【讨论】：

谢谢，但我有很多其他字段（包括指令和非指令）具有不同的验证，也将确定 ng-disabled 的值，因此这种方法可能会变得非常复杂，因为这些字段中的每一个验证需要以相同的方式包含在内
啊，因为您的 Qs 不清楚，“如果在下拉列表中未选择任何内容（并且您提供了下拉列表之一），我如何将 ng-disabled 设置为 true”，而您似乎有多个下拉菜单
要解决这个问题，然后在每个下拉列表中添加第一个为空值，这样 require 就可以了。

【解决方案2】：

用ng-required怎么样：

<select class='form-control' ng-model='vm.scope.fixtureToBeUpdated.awayTeam' ng-options='awayTeam.teamName for awayTeam in vm.scope.awayTeams track by awayTeam.teamId' ng-required="vm.scope.fixtureToBeUpdated.awayTeam">
    <option style='display: none' value=''>{{'SELECT' | translate }}</option>
</select>

【讨论】：