angualr操作dom

目录

笔者在实际开发中，总是能遇到用angular动态的操作dom，特意将工程中的代码贴出

需求

给一张卷子 设置 分数段评级
1—60 是 D
61—70 是 C
71—-80 是B
81—–100 是A
** 支持 个人定制化，随意变化分数段，随意改变 评级 可以是 A- A+
###效果图

功能简介： 1 点击 + - 可以动态的添加整行的 输入框，
2. 选中某行，可以进行定向的 删除
3. 可以最后将所有的 规则保存到数据库，需要对计分规则进行校验，
4. 分数段区间 不能有重复，不能有遗漏，
5. 分数段 可以是 x<60 —–D x>100 ——A+
###html代码

<div class="form-group">  
<div class="col-sm-8"> 
<div class="table-responsive">
        <table cellpadding="0" cellspacing="0" border="0"
        class="datatable table table-hover dataTable  table-bordered">
        <thead>
        <tr>
        <th></th>
        <th>编号</th>
        <th>评分区间起</th>
        <th>包含关系</th> 
        <th>score</th> 
        <th>包含关系</th>
        <th>评分区间止</th> 
        <th>Rate</th>
        <th>对应打分</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="item in paramDetailList" >
        <td>
        <input type="checkbox" name="selected"
        ng-checked="isSelected($index)"
        ng-click="updateSelection($event,$index)"/>
        </td>
        <td>{{$index+1}}</td>
        <td>
        <!-- todo 需要对所有的 输入规则进行 验证-->

        <input
        style="width: 80px;"
        ng-pattern="/^(([1-9]+)|([0-9]+\.[0-9]{1,4}))$/"
        class="form-control"
        name="actualSectionStarts"
        ng-model="item.actualSectionStart">

        <span style="color:red"  ng-show="form.actualSectionStarts.$invalid
        &&form.actualSectionStarts.$dirty" >
        <span ng-show="form.actualSectionStarts.$error.pattern">
        最多输入4位小数
        </span>
        </span>
        </td>
        <td>
        <select ng-model="item.inclusionRelationStart"
        style="width:95px;"
        ng-options="x.name as
        x.name for x in symbolDataBig"
        class="form-control"
        ng-selected="x.id==
        changeWord(item.inclusionRelationStart)"
        >
        <option value="">请选择</option>
        </select>

        </td> 
        <td>score</td> 
        <td> 
        <select ng-model="item.inclusionRelationEnd"
        style="width:95px;"
        ng-options="x.name as
        x.name for x in symbolDataSmall"
        class="form-control"
        ng-selected="x.id==
        changeWord(item.inclusionRelationEnd)"
        >
        <option value="">请选择</option>
        </select>

        </td>
        <td>
        <input
        style="width: 80px;"
        class="form-control"
        ng-pattern="/^(([1-9]+)|([0-9]+\.[0-9]{1,4}))$/"
        name="actualSectionEnds+$index"
        ng-model="item.actualSectionEnd">
        <span style="color:red"  ng-show="form.actualSectionEnds.$invalid
        &&form.actualSectionEnds.$dirty" >
        <span ng-show="form.actualSectionEnds.$error.pattern">
        最多输入4位小数
        </span>
        </span>

        </td>

        <td>
        <input
        style="width: 80px;"
        class="form-control"
        type="number"
        name="rates"
        ng-model="item.rate">
        </td>

        <td>
        <input
        style="width: 80px;"
        class="form-control"
        ng-pattern="/^(([1-9]+)|([0-9]+\.[0-9]{1,4}))$/"
        name="scores"
        ng-model="item.score">
        <span style="color:red"  ng-show="form.scores.$invalid
        &&form.scores.$dirty" >
        <span ng-show="form.scores.$error.pattern">
        最多输入4位小数
        </span>
        </span>
        </td>
        </tr>
        </tbody>
        </table>

        </div>
        </div>

        <div class="col-sm-2">
        <button class="btn btn-default"
        type="button"
        ng-click="addtd($index)">+</button>
        <button class="btn btn-default"
        type="button"
        ng-click="deletetd($index)"
        >-</button>

</div> 
</div> 

### 2 分析html

        ng-checked="isSelected($index)"
        ng-click="updateSelection($event,$index)"      

这两个函数主要是为了将选中的行存入一个数组中，最后所有被选中的行的行好会传给了 $scope.selected中。

  $scope.selected = [];  // 很重要，作为你选取的checkbox的存储器，
    var updateSelected = function (action, id) {
        // 这个函数主要给 checkbox赋值，选还是不选，操作的是 $scope.selected这个“List”
        if (action == 'add' && $scope.selected.indexOf(id) == -1)
            $scope.selected.push(id);
        if (action == 'remove' && $scope.selected.indexOf(id) != -1)
            $scope.selected.splice($scope.selected.indexOf(id), 1);
    };
    //更新某一列数据的选择
    $scope.updateSelection = function ($event, id) {
        var checkbox = $event.target;
        // 这个意思就是 checkbox 如果选了，那就action='add',方便后续的操作“List”
        var action = (checkbox.checked ? 'add' : 'remove');
        updateSelected(action, id);
    };
    $scope.isSelected = function (id) {
        return $scope.selected.indexOf(id) >= 0;
    };

3

{{$index+1}} 就是看到的可以随着行号变化的 编号，$index是ng-repeat中的序列号

4

这是 可以选择的符号

 <select ng-model="item.inclusionRelationEnd"           ng-options="x.name as                                     x.name for x in symbolDataSmall"                               class="form-control"                                        ng-selected="x.id==                                              changeWord(item.inclusionRelationEnd)"   >              <option value="">请选择</option>                   </select>

对应的js代码就是：实现 可以将下拉款中的符号的转化

 $rootScope.app.symbolDatapartOne:[
              {id:2,name:'<'},
              {id:4,name:'<='}
          ],
  //静态的符号数据  从左向右
    $scope.symbolDataBig=$rootScope.app.symbolDatapartOne;
    $scope.symbolDataSmall=$rootScope.app.symbolDatapartOne;
    $scope.changeWord=function(param){
        if(param=='>='){
            return '3'
        }else  if(param=='>'){
            return '1'
        }else  if(param=='<='){
            return '4'
        }else  if(param=='<'){
            return '2'
        }
    };

5

动态执行删除和增加的函数

<button class="btn btn-default"
type="button"
ng-click="addtd($index)">+</button>
<button class="btn btn-default"
type="button"
ng-click="deletetd($index)"
>-</button>

js代码

// 动态的增加dom
$scope.addtd = function($index) {
$scope.paramDetailList.splice($index + 1, 0,

    {
        actualSectionStart:'',
        inclusionRelationStart:'',
        actualSectionEnd:'',
        inclusionRelationEnd:'',
        rate:'',
        score:''
    }

);
};

// 删除
    $scope.deletetd = function($index) {

        var sdf=[];
        sdf=$scope.selected;
        angular.forEach(sdf,function (data,index,array) {
            $scope.paramDetailList.splice(data, 1);
        });

    }; 

保存时

保存时 很明显是需要做很多校验的， 比如 第一行永远最大，第二行不能比他大，其次每一行之间 起始的校验，

//需要对区间之间做 校验
var maxlength=$scope.paramDetailList.length;
var flag=true;
angular.forEach(targetDataAndrule.targetRules,function (item,index,array) {
    //从上向下 是 100----1 递减

    var starscore=array[index].actualSectionStart;
    var starincl=array[index].inclusionRelationStart;
    var endscore=array[index].actualSectionEnd;
    var endincl=array[index].inclusionRelationEnd;
    var Actualscore=array[index].score;
    //分数肯定不能为空
    if(Actualscore==null||Actualscore==""){
        flag=false;
        alert('计分区间不合法，请检查，对应打分不能为空');
    }
    //单行的验证
    if(flag){
        if(maxlength>=1&&(maxlength-1)==index){
            //最后一个可以是 起始位空
            if(starscore!=null&&starscore!=""){
                 //起始位 以外 都不能为空
                  if(endincl==""||starincl==""||
                      endincl==null||starincl==null ){
                      flag=false;
                      alert('计分区间不合法，请检查，终止端不能为空');
                  }else{
                      if(endscore<=starscore){
                          flag=false;
                          alert('计分区间不合法，请检查，终止端必须大于起始端');
                      }
                  }
            }
        }else {
            // 后面的分数不是空
            if(endscore!=null&&endscore!=""){
                //后面的关系是空，
                if(endincl==null||starincl==null||starscore==null
                   ||endincl==""||starincl==""||starscore==""
                ){
                    flag=false;
                    alert('计分区间不合法，请检查，起始端不能为空');
                }else{
                    if(endscore<=starscore){
                        flag=false;
                        alert('计分区间不合法，请检查，终止端必须大于起始端');
                    }
                }
            }
        }

    }
    //两行之间做判断
    if(flag){
        //多于一行 且 不是最后一行
        if(maxlength>=1&&(maxlength-1)!=index){
            var endscoresmall=array[index+1].actualSectionEnd;
            var endinclsmall=array[index+1].inclusionRelationEnd;
            // 上一行的 起 必须 大于 下一行的终止
            if(starscore<endscoresmall){
                flag=false;
                alert('计分区间不合法，请检查，区间有重复');
            }

            if(starincl!=null&&starincl!=""
                &&endinclsmall!=null&&endinclsmall!=""){
                var starsum= $scope.changeWord(starincl);
                var endsum= $scope.changeWord(endinclsmall);
                if(starsum==2&&endsum==2){
                    flag=false;
                    alert('计分区间不合法，请检查，区间有不完整');
                }
            }
        }
    }


});