Question

我已经在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？

Answer 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"

Answer 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>

需要在Angular中制作下拉指令

2 个答案: