迭代(二)

来源：互联网发布：两大人工智能编程语言编辑：程序博客网时间：2024/05/24 23:15

模态窗口

任务描述：点击按钮，弹出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)">●&nbsp;分数过高</li>              <li class="btn btn-link " ng-click="setReturnReason('分数过低', reasonForm)">●&nbsp;分数过低</li>              <li class="btn btn-link " ng-click="setReturnReason('正确给分错误', reasonForm)">●&nbsp;正确给分错误</li>              <li class="btn btn-link " ng-click="setReturnReason('错误给分正确', reasonForm)">●&nbsp;错误给分正确</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的.

0 0