Question

我检查了所有SO问题，但仍然无法使其正常工作。

这是我的下拉代码。 ng-required的值应该是一个变量。

<!-- only show if country is usa or canada-->
    <div class="row">
        <div class="form-group" ng-class="{ 'has-error' : participantForm.state.$invalid && (!participantForm.state.$pristine || isSubmitted) }">
            <div class="col-sm-6 key">US State or Canadian Province:</div>
            <div class="col-sm-6 val">
                <select ng-model="participant.state" name="state" class="form-control" ng-required="isSelectState" ng-options="state.Key as state.Value for state in states">
                    <option value="">SELECT</option>
                </select>
                <p ng-show="participantForm.state.$error.required && (!participantForm.state.$pristine || isSubmitted)" class="help-block">Your state is required for USA or Canada.</p>
            </div>
        </div>
    </div>

这是我的JS代码

IYApp.controller("ParticipantFormController", ['$scope', '$http', '$filter', '$mdToast', '$mdDialog', '$rootScope', function ($scope, $http, $filter, $mdToast, $mdDialog, $rootScope) {

$scope.isSelectWorkState = true;
$scope.isSelectState = true;
}

如果我更改ng-required="true"，则验证有效。只有在我将其设置为“ng-required =＆＃34; isSelectState＆＃34;＆＃39;

时

Answer 1

它有效，请查看代码段： -

＆＃13;

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  
 $scope.isSelectWorkState = true;
$scope.isSelectState = true;
});

＆＃13;

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
  
<!-- only show if country is usa or canada-->
    <div class="row">
    <form name="participantForm.state">
        <div class="form-group" ng-class="{ 'has-error' : participantForm.state.$invalid && (!participantForm.state.$pristine || isSubmitted) }">
            <div class="col-sm-6 key">US State or Canadian Province:</div>
            <div class="col-sm-6 val">
                <select ng-model="participant.state" name="state" class="form-control" ng-required="isSelectState">
                    <option value="">SELECT</option>
                     <option value="1">OPTOPN 1</option>
                </select>
                <p ng-show="participantForm.state.$error.required" class="help-block">Your state is required for USA or Canada.</p>
            </div>
        </div>
       </form>
    </div>
</div>

＆＃13;

Answer 2

我创建了一些小样本并且工作正常：

var app = angular.module('validApp',[]);
app.controller('validAppCtrlr',function($scope) {
$scope.isSelectState = true;
}
);

body {font-size:0.9em;font-family:sans-serif;}
input.ng-invalid, select.ng-invalid, textarea.ng-invalid, input.formElement.ng-invalid {
    border: solid 1pt red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="validApp" ng-controller="validAppCtrlr">
    <input type="checkbox" ng-model="isSelectState">
    <input ng-model="i1" ng-required="isSelectState"><br/>
    Required? {{isSelectState}}<br/>
    {{i1}}
</div>

变量不起作用的必需项

2 个答案: