mdTab中的DOM元素未使用角度.css方法更新

我在表格中獲得了進度條，其中顯示了項目花了多少小時。當我點擊某個選項卡時，currentTab方法被激發以從數據庫獲取數據，並且在我答應解決後，我的TimeService函數也被觸發以計算進度條的小時數，但是當達到angular .css()時，它根本不更新我的進度條，不知道爲什麼，因爲它絕對是100％的工作代碼。 mdTabs中有一些功能可以防止這種情況發生？mdTab中的DOM元素未使用角度.css方法更新

下面

HTML代碼，我刪除了很多東西，使其更具可讀性

<md-tab label="Testing" md-on-select="currentTab('Testing')"> 
<md-content class="md-padding"> 
    <table id="projects-active" class="table table-bordered table-striped"> 
     <thead> 
      <tr> 
       <th>Id</th> 
       <th>Name</th> 
       <th>Description</th> 
       <th>Estimated time</th> 
       <th>Status</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="project in projects.Data"> 
       <td>{{project.Id}}</td> 
       <td>{{project.Name}}</td> 
       <td>{{project.Description}}</td> 
       <td> 
        <div class="progress-group"> 
         <div class="progress sm"> 
          <div class="progress-bar progress-bar-success progress-bar-striped" id="progress-bar-pId-{{project.Id}}"> 
          </div> 
         </div> 
        </div> 
       </td> 
       <td>{{project.Status}}</td> 
      </tr> 

     </tbody> 
    </table> 
    <div class="box-footer clearfix"> 
     <ul uib-pagination total-items="totalItems" 
      items-per-page="maxSize" 
      ng-model="currentPage" 
      max-size="maxSize" 
      class="pagination-sm" 
      boundary-links="true" 
      num-pages="pages" 
      ng-change="setPage(currentPage, 'Testing')"></ul> 
    </div> 
</md-content>

這是我在TimeService MODUL

projectProgressArray: function (array) { 

var items = array.Data; 

angular.forEach(items, function (key, value) { 
    var id = key.Id; 
    var maxTime = key.EstimatedTime; 
    var currentTime = key.TimeSpend; 
    var percentageComplete = Math.round(((currentTime/maxTime) * PERCENTAGE) * 100)/100; 
    if (!("#progress-bar-pId-" + id).length == 0) { 
     angular.element("#progress-bar-pId-" + id).css("width", percentageComplete + "%"); 
     if (percentageComplete > 100) { 
      angular.element("#progress-bar-pId-" + id).removeClass("progress-bar-success"); 
      angular.element("#progress-bar-pId-" + id).addClass("progress-bar-danger"); 
     } 
    } 
});

這功能我控制器功能在哪裏將數據提取到我的數據表中

var MAX_SIZE_PER_PAGE = 5; 

$scope.currentPage = 1; 
$scope.maxSize = MAX_SIZE_PER_PAGE; 
$scope.pages = 0; 
$scope.totalItems = 0; 

$scope.setPage = function (pageNo, status) { 
$scope.currentPage = pageNo; 
$scope.projects = ProjectService.queryPaged({ pageSize: $scope.maxSize, pageNumber: $scope.currentPage, status: status }); 

    $scope.projects.$promise.then(function (data) { 
     setTimeout(function() { 
      TimeService.projectProgressArray($scope.projects); 
     }, 0); 
    }); 
}; 
$scope.currentTab = function (status) { 

    $scope.projects = ProjectService.queryPaged({ pageSize: $scope.maxSize, pageNumber: 1, status: status }); 
    $scope.projects.$promise.then(function (data) { 
     $scope.totalItems = data.TotalCount; 

     setTimeout(function() { 
      TimeService.projectProgressArray($scope.projects); 
     }, 0); 
    }); 
}

更新：我添加了圖像，我在md-tab之外複製進度條以顯示其在md-tabs之外但不在裏面的工作。

來源

2017-02-19 Martin

所以經過我一段時間發現我不能css在Angular material使用angular.element().css()方法操作。我不得不修改我的TimeService方法，我創建的數組充滿了對每個項目單進度條信息發回給我的控制器，並使用ng-style 與我的NG-材料DOM

projectProgressArray: function (array) { 
      var progressBarArray = []; 

      var items = array.Data; 

      angular.forEach(items, function (key, value) { 
       var progressBar = { 
        projectId: null, 
        percentage: null, 
        barClass: null 
       } 

       var id = key.Id; 
       var maxTime = key.EstimatedTime; 
       var currentTime = key.TimeSpend; 
       var percentageComplete = Math.round(((currentTime/maxTime) * PERCENTAGE) * 100)/100; 

       progressBar.projectId = id; 
       progressBar.percentage = percentageComplete + "%"; 

       if (!("#progress-bar-pId-" + id).length == 0) { 
        if (percentageComplete > 100) { 
         progressBar.barClass = "progress-bar-danger"; 
        } 
        else { 
         progressBar.barClass = "progress-bar-success"; 
        } 
       } 
       progressBarArray.push(progressBar); 
      }); 
      return progressBarArray;

返工HTML中的CSS操縱結合

<div class="progress-group"> 
<div class="progress sm" ng-repeat="item in progressBars" ng-hide="item.projectId != project.Id"> 
    <div ng-class="{'progress-bar-success': item.barClass == 'progress-bar-success', 
                  'progress-bar-danger': item.barClass == 'progress-bar-danger' }" 
     class="progress-bar progress-bar-success progress-bar-striped" id="progress-bar-pId-{{project.Id}}" 
     ng-style="{'width':item.percentage}"> 
    </div> 
</div>

來源

2017-02-19 13:04:01 Martin

mdTab中的DOM元素未使用角度.css方法更新

回答

相關問題