动态更改表格行颜色angularjs

时间:2016-08-30 09:03:11

标签: html css angularjs

我正在使用ng-repeat显示表格行,并使用border-bottom样式分隔每一行。

它的工作正常,但我的问题是border-bottom也显示为空值的行。

我只需要为具有值的行显示边框,如果行值为空或者为null,则应隐藏行,如下图所示。

<form name="eForm" role="form" novalidate>
  <div ng-repeat="data in blobObjEducation">
    <table  class="table table-hover dataTable col-sm-8" >
      <tr ng-show="!eEditMode[$index]">
          <td class = "col-sm-6 editstyle" ng-if="!data.yoj && !yoc || !data.university ||!data.qualification && !data.specialization"></td>
          <td class ="col-sm-6" ng-show="data.yoj && data.institute &&(data.qualification || data.qualificationTxt) && (data.specialization  || data.specializationTxt) && data.yoc">
            <b id="universitytitle">{{data.institute}}</b>
            <br><br>
            <b class="sizefortitle">{{data.qualification}} &nbsp;&nbsp;&nbsp;
            {{data.specialization}}
            <b class ="sizefortitle"></b>&nbsp;&nbsp;&nbsp;{{data.yoj}} To {{data.yoc}}</b>
          </td>
          <td  ng-show="editIconDisplay[$index]" class = "col-sm-1 editstyle pull-left" id ="editId" ng-click="edit('education', $index);"><a aria-hidden="true"><span class="pull-right glyphicon glyphicon-pencil"  data-toggle ="tooltip" title="Edit your Qualification" data-placement ="top"></span></a>
          </td>
      </tr>
    </table>
  </div>
</form> 

我的控制器:

$scope.isCollapsed[index] = true;
            if (type === 'education') {

                if ($scope.originaldata[index] != null) {

                    $scope.blobObjEducation[index] = angular.copy($scope.originaldata[index]);
                    $scope.blobObjEducation[index].yoj = $scope.originaldata[index].yearofjoin;
                    $scope.blobObjEducation[index].yoc = $scope.originaldata[index].yearofcompletion;
                } else {
                    $scope.blobObjEducation[index] = {
                        "qualification": "",
                        "specialization": "",
                        "studymode": "",
                        "institute": "",
                        "university": "",
                        "country": "",
                        "state": "",
                        "city": "",
                        "yoj": "",
                        "yoc": "",
                        "marks": ""
                    }
                    $scope.editIconDisplay[index] = false;

                }
            }
            $timeout(function() {
                $scope.edit("education", index);
                console.log($scope.blobObjEducation);
                console.log($scope.blobObjEducation.length);
                for (var z = 0; z < $scope.blobObjEducation.length; z++) {
                    $scope.isCollapsed[z] = true;
                    $scope.displayMode[z] = true;
                    $scope.eEditMode[z] = false;
                    $scope.editIconDisplay[z] = true;
                };
                $scope.displayAddButton = true;
            }, 200);

image

0 个答案:

没有答案
相关问题