迭代(三)_迭代三-优快云博客

本文介绍了一个使用AngularJS实现的动态分数点展示系统。该系统能够根据屏幕尺寸动态调整显示的分数点数量，并允许用户查看完整的分数点列表。文章详细解释了如何通过HTML和JavaScript代码实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

迭代(三)

HTML代码段：

<style>
  .cursor-pointer {
    cursor: pointer;
  }
  .question-name {
    margin:0;
    line-height:50px;
    border-right: #ddd solid 1px
  }
  .score-point {
    width: 30px; float: left;text-align:center; background-color: #ddd; margin: 5px;padding: 2px 0;border-radius: 3px;font-size: 12px; color: #000;"
  }
  .leave-out {
    width: 30px; float: left;text-align:center; margin: 3px 0 0 0;
  }

</style>
<div class="content-header">
  <h1>给分板设置</h1>
</div>
<div class="container-fluid">
  <div style="height: 50px;padding:10px;">
    <div class="fl">
      <button type="button" class="btn btn-primary" ng-click="goToBack();">
        <i class=" icon-circle-arrow-left"></i>&nbsp;返回
      </button>
    </div>

  </div>
  <div class="row-fluid">
    <div class="span12">
      <div class="widget-box">
        <div class="widget-title"><span class="icon"> <i class="icon-th"></i> </span>
          <h5>
            <span>{{examPaperInfo.examName}}</span>
            <span style=" margin-left:30px;">({{examPaperInfo.examSubjectScanScheduleList[0].examSubjectClassification.examSubjectName}})</span>
          </h5>
        </div>

        <div class="widget-content nopadding">
          <table align="center" class="table table-bordered table-striped table-pd0">
            <thead>
            <tr>
              <th width="10%">题组</th>
              <th width="10%">题号</th>
              <th width="10%">满分</th>
              <th width="30%">分数点</th>
              <th width="20%">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="questionGroup in questionGroups">
              <td class="text-center table_vmiddle" style="margin: 0">题组{{questionGroup.questionGroupId}}</td>
              <td colspan="3">
                <table class="table text-center" style="table-layout: fixed; ">
                  <tbody>
                  <tr ng-repeat="scoreBoardQuestion in questionGroup.scoreBoardQuestions" >
                    <td width="20%" class="text-center table_vmiddle question-name" ng-bind="scoreBoardQuestion.questionName"></td>
                    <td width="20%" class="text-center table_vmiddle total-score" ng-bind="scoreBoardQuestion.totalScore"
                        style=" margin:0; line-height:50px; border-right: #ddd solid 1px"></td>
                    <td id="tdWidthId" ng-class="{'cursor-pointer': scoreBoardQuestion.scorePointList.length > num}" class="text-left table_vmiddle" ng-click="getAllMarkPoint(questionGroup, scoreBoardQuestion, scorePoint)">
                      <div id="divWidthId" ng-repeat="scorePoint in scoreBoardQuestion.scorePointList | limitTo: num" ng-bind="scorePoint" class="score-point">
                      </div>
                      <div ng-show="scoreBoardQuestion.scorePointList.length > num" class="leave-out">
                        <i class="icon-ellipsis icon-2x" style="color: #ccc;" ></i>
                      </div>
                    </td>
                  </tr>
                  </tbody>

                </table>
              </td>
              <td class="text-center table_vmiddle "><button class="btn btn-warning" ng-click="editScoreBoard(questionGroup)" >编辑</button> </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/ng-template" id="allMarkPointModal.html">
  <div class="container-fluid">
      <div class="widget-content">
        <h4 class="modal-title" style="margin-bottom: 20px;">
          <b>题组{{questionGroup.questionGroupId}}&nbsp;&nbsp;{{scoreBoardQuestion.questionName}}&nbsp;&nbsp;分数点</b>
        </h4>
        <div class="row">
          <div class="col-xs-12">
              <div ng-repeat="scorePoint in scoreBoardQuestion.scorePointList" ng-bind="scorePoint"
                   style="width: 33px; float: left;text-align:center; background-color: #ddd; margin: 10px;padding: 2px 0;border-radius: 3px;font-size: 12px; color: #000;">
              </div>
          </div>
        </div>
        <br />
        <div style="text-align: center;">
          <button type="button" class="btn btn-info" ng-click="cancel()">关闭</button>
        </div>
      </div>
  </div>
</script>


js代码段：

/**
 * Created by Administrator on 2016/8/31.
 */
RootApp.controller('markPlateFitController', ['$scope', '$state', '$stateParams', '$modal', 'valueResult',
  'examPaperInfo', '$timeout', '$window', 'scoreBoardListService',
  function($scope, $state, $stateParams, $modal, valueResult, examPaperInfo, $timeout, $window, scoreBoardListService){
  $scope.questionGroups = valueResult.value;
  $scope.examPaperInfo = examPaperInfo;

    function changePointNum(){
      $timeout(function(){
        var tdWidth = $('#tdWidthId').width();
        var divWidth = 42;
        $scope.num = Math.floor(tdWidth/divWidth) - 1;
      }, 100);
    }

    $($window).on('resize', changePointNum);
    changePointNum();

  $scope.getAllMarkPoint = function(questionGroup, scoreBoardQuestion, scorePoint){
    if(scoreBoardQuestion.scorePointList.length > $scope.num){
      var modalInstance = $modal.open({
        backdrop:'static',
        templateUrl:'allMarkPointModal.html',
        resolve: {
          questionGroup: function(){
            return questionGroup
          },
          scoreBoardQuestion: function(){
            return scoreBoardQuestion;
          },
          scorePoint: function(){
            return scorePoint
          }
        },
        controller:['$scope', 'scoreBoardQuestion', '$modalInstance', function($scope, scoreBoardQuestion, $modalInstance){
          $scope.scoreBoardQuestion = scoreBoardQuestion;
          $scope.questionGroup = questionGroup;

          $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
          }
        }]
      })
    }
  };

  //返回按钮
  $scope.goToBack = function () {
    $state.go(eduMarkPapersManageStates.markPaperManage, $stateParams);
  };

  // 编辑给分板
  $scope.editScoreBoard = function (questionGroup) {
    var modalInstance = scoreBoardEditWindow($modal, questionGroup);
    // 保存成功后，重新获取数据
    modalInstance.result.then(function(){
      scoreBoardListService({examId: $stateParams.examId, examPaperId: $stateParams.examPaperId}).then(function(result){
        $scope.questionGroups = result.value;
      });
    });
  }

}]);

//重点：

1.

<div id="divWidthId" ng-repeat="scorePoint in scoreBoardQuestion.scorePointList | limitTo: num" ng-bind="scorePoint" class="score-point">
过滤器limitTo限制div显示个数。

2.

function changePointNum(){
  $timeout(function(){
    var tdWidth = $('#tdWidthId').width();   //jQuery获得显示屏宽度，计算得到num的值
    var divWidth = 42;
    $scope.num = Math.floor(tdWidth/divWidth) - 1;
  }, 100);
}

$($window).on('resize', changePointNum);  //监听当改变window窗口大小时，调用函数changePointNum
changePointNum();   //先调用一次函数

3.

ng-class="{'cursor-pointer': scoreBoardQuestion.scorePointList.length > num}
//当判断条件为true时，class="cursor-pointer"