模态窗口
任务描述:点击按钮,弹出moudle窗口
相关代码片段:
//js相关片段
$scope.returnAgainMark = function () { var modalInstance = $modal.open({ backdrop:'static', //锁定背景,点击模态窗口其他地方不关闭模态窗口 templateUrl: 'returnAgainMarkModal.html', resolve: { teacherMarkQuestionContentInfo: function(){ return $scope.teacherMarkQuestionContentInfo; //将模态窗口外面页面的值teacherMarkQuestionContentInfo传入到模态窗口} }, controller: ['$scope', '$modalInstance', 'teacherMarkQuestionContentInfo', function ($scope, $modalInstance, teacherMarkQuestionContentInfo) { $scope.state = false; $scope.reason = { value: '' }; //点击按钮添加原因 $scope.setReturnReason = function (str,reasonForm) { var temp = ''; if(angular.isDefined($scope.reason.value)){ temp = $scope.reason.value; } if(!!$scope.reason.value && $scope.reason.value.length > 50){ reasonForm.returnReason.$setValidity("reasonMaxLength", false); return false; }else{ reasonForm.returnReason.$setValidity("reasonMaxLength", true); } $scope.reason.value = temp + str + ' '; }; //确定提交退回重阅原因 $scope.confirmReason = function (reason, reasonForm) { if(!!$scope.reason.value && $scope.reason.value.length > 50){ reasonForm.returnReason.$setValidity("reasonMaxLength", false); return false; }else{ reasonForm.returnReason.$setValidity("reasonMaxLength", true); } if (reasonForm.$invalid) { reasonForm.doValidate(); return false; } var markPapersQuestionList = teacherMarkQuestionContentInfo.markQuestionInfo.markPapersQuestionList; var markQuestions = []; angular.forEach(markPapersQuestionList, function(member){ var markQuestion = { markTotalScore: member.markTotalScore, questionName: member.questionName, questionTypeName: member.questionTypeName, testQuestionId: member.testQuestionId, totalScore: member.totalScore, unitQuestionId: member.unitQuestionId }; markQuestions.push(markQuestion); }); var params = { examId: $stateParams.examId, paperId: $stateParams.paperId, teacherId: $stateParams.teacherId, markGroupId: teacherMarkQuestionContentInfo.markGroupNo, studentId: teacherMarkQuestionContentInfo.markQuestionInfo.studentId, questionGroupId: $stateParams.questionGroupId, teacherName:$stateParams.teacherName, returnMarkReason:$scope.reason.value }; params.markQuestions = markQuestions; returnAgainMark.save(params,function(result){ if(result.status.value ==1){ showInfo("退回重阅成功"); }else if(result.status.value ==-1){ showInfo(result.message); }else { showInfo("退回失败!"); } $modalInstance.close(reason); },function(){}); }; //关闭窗口 $scope.cancel = function () { $modalInstance.dismiss('cancel'); } }] }); modalInstance.result.then(function (reason) { //保存正确跳到下一题 // $scope.getQuestion(false); });};
//moudle相关HTML片段
<script type="text/ng-template" id="returnAgainMarkModal.html"> <div class="container-fluid"> <div class="widget-box"> <div class="widget-content"> <h4 class="modal-title" style="margin-bottom: 20px;"><b>退回重阅</b></h4> <form name="reasonForm" w5c-form-validate="{'blurTrig':false}" novalidate role="form" autocomplete="off"> <div class="form-group"> <label class="mb5" >请输入退回重阅原因:</label> <textarea name="returnReason" ng-model="reason.value" rows="5" class="form-control" maxlength="50" placeholder="少于50字" labelname="退回重阅原因" required></textarea> <small ng-show="reasonForm.returnReason.$error.reasonMaxLength" style="color: #843534;">该选项输入值长度不能大于50</small> <ul style="padding-left: 0px;"> <li class="btn btn-link " ng-click="setReturnReason('分数过高', reasonForm)">● 分数过高</li> <li class="btn btn-link " ng-click="setReturnReason('分数过低', reasonForm)">● 分数过低</li> <li class="btn btn-link " ng-click="setReturnReason('正确给分错误', reasonForm)">● 正确给分错误</li> <li class="btn btn-link " ng-click="setReturnReason('错误给分正确', reasonForm)">● 错误给分正确</li> </ul> </div> </form> <div style="text-align: center;"> <button type="button" class="btn btn-success" ng-click="confirmReason(reason, reasonForm)">确定</button> <button type="button" class="btn btn-primary" ng-click="cancel()">取消</button> </div> </div> </div> </div> </script>安全校验:
$scope.confirmReason = function (reason, reasonForm) { if(!!$scope.reason.value && $scope.reason.value.length > 50){ reasonForm.returnReason.$setValidity("reasonMaxLength", false); return false; //if条件为true时,显示<small> }else{ reasonForm.returnReason.$setValidity("reasonMaxLength", true); } if (reasonForm.$invalid) { reasonForm.doValidate(); return false; }//reasonForm: form表单name值,作为函数参数传入<small ng-show="reasonForm.returnReason.$error.reasonMaxLength" style="color: #843534;">该选项输入值长度不能大于50</small>//关闭窗口 $scope.cancel = function () { $modalInstance.dismiss('cancel'); }
modalInstance.result.then(function (reason) { //保存正确跳到下一题 // $scope.getQuestion(false); });
ng form 会给根据具体情况给表单里的每项自动添加下列 css class:
- ng-valid: 验证通过
- ng-invalid: 验证没有通过
- ng-pristine: 用户没有输入任何东西
- ng-dirty: 用户输入了东西, 不管最终值有木有改变。 例如开始里面是空的, 填写了ab, 之后又吧ab删除了, 这是也是dirty的.