Question

我有两个下拉菜单说“第一评论员”＆＃39;和第二审稿人＆＃39;。我想验证下拉列表＆＃39; Second Reviewer＆＃39;如果用户选择与第一个下拉列表中相同的值，即“第一个评论者”。我怎么能在angularjs中做到这一点？

以下是代码段：

＆＃13;

	<div class="row-fluid">	
		<div dyna-span="5,6">
			<bs-control-group label="Review Level:">
				<label class="radio inline"> <input type="radio"
					name="userTypeId" ng-model="reimbReviewer.reviewLevel" value="1"
					class="inline" />&nbsp;One Level
				</label> <label class="radio inline"> <input type="radio"
					name="userTypeId" ng-model="reimbReviewer.reviewLevel" value="2">&nbsp;Two Level
				</label> 
			</bs-control-group>
			<bs-control-group label="First Reviewer"> <select
								class="input-medium" ui-select2 name="firstReviewer"
								ng-model="reimbReviewer.firstReviewer" gt-input-msg
								gt-error-msgs="gtinputerrormsgs" required>
								<option value="">----Select----</option>
								<option ng-repeat="a in reviewerTypes" value={{a.id}}>{{a.title}}</option>
			</select> </bs-control-group>
			<span ng-show="reimbReviewer.reviewLevel==2">
				<bs-control-group label="Second Reviewer"> <select
									class="input-medium" ui-select2 name="secondReviewer"
									ng-model="reimbReviewer.secondReviewer" gt-input-msg
									gt-error-msgs="gtinputerrormsgs"  ng-required="reimbReviewer.reviewLevel==2">
									<option value="">----Select----</option>
									<option ng-repeat="a in reviewerTypes" value={{a.id}}>{{a.title}}</option> 
								</select> </bs-control-group>
		    </span>
		</div>
	</div>

＆＃13;

Answer 1

这是一个有效的演示。

// the main (app) module
var app = angular.module("myApp", []);

// add a controller
app.controller("myCtrl", function($scope) {
    //debugger;
    $scope.msg = "";
    $scope.reimbReviewer = {};
    $scope.reviewerTypes = [
      {
		id: 1,
        title: 'A'
      },
      {
      	id:2,
        title: 'B'
      },
      {
      	id: 3,
        title: 'C'
      }
    ];
    
    $scope.submit = function() {
    	debugger;
    	if($scope.dropdownForm.$invalid) {
    	  $scope.msg = "Fields are required";
      	//console.log('Fields are required');
        return;
      }
    	if($scope.reimbReviewer.firstReviewer === $scope.reimbReviewer.secondReviewer) {
  			
        //console.log('Fileds must be different');
        $scope.msg = "Fileds must be different";
        return;
      } else {
        $scope.msg = "Both are different. Do your stuff";
      	//console.log('Both are different. Do your stuff');
      }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<!DOCTYPE html>
<html>

  <head>
  </head>

  <body ng-app="myApp" ng-controller="myCtrl" style="margin:20px">
    <form name="dropdownForm">
      <select name="firstReviewer" ng-model="reimbReviewer.firstReviewer" required>
        <option value="">----first----</option>
        <option ng-repeat="a in reviewerTypes" value="{{a.id}}">
          {{a.title}}
        </option>
      </select>
      
      <select name="secondReviewer" ng-model="reimbReviewer.secondReviewer" required>
      <option value="">----second----</option>
        <option ng-repeat="a in reviewerTypes" value="{{a.id}}">
          {{a.title}}
        </option>
      </select>
      <button type="button" ng-click="submit()">submit</button> <br />
      <p ng-if="msg">{{msg}}</p>
    </form>
  </body>

</html>

初始化ng模型后，如果它们具有相同的值，则将它们进行比较

如果值与另一个字段相同，则对字段进行Angular Form验证

1 个答案: