進度條在AngularJS中反向

您所在的位置：网站首页 › result标签中column和property › 進度條在AngularJS中反向

進度條在AngularJS中反向

#進度條在AngularJS中反向| 来源: 网络整理| 查看: 265

我已經使用AngularJS構建了一個小應用程序。進度條在AngularJS中反向

有一個使用ng-repeat的數據表。數據表不斷更新，通過網絡套接字實時更新，添加和刪除行。

每一行都有一個進度條，它是一個簡單的div，其中的css寬度的百分比由數據屬性設置。

這裏是我的HTML片段：

這裏是我的控制器的簡化版本：

workmanagerControllers.controller('JobListCtrl', function($scope, workmanagerChannel, Jobs) { /** * Property by which the data set is sorted by default * @type {string} */ $scope.sort = {column: 'progress', reverseorder: false }; /** * Populate jobs object from Jobs REST service at first load * @type {HTMLElement|*|query|query} */ $scope.jobs = Jobs.query(); /** * Bind add job function to workmanager Pusher channel */ workmanagerChannel.bind('addjob', function (data) { $scope.jobs.push(data); }); /** * Bind update job function to workmanager Pusher channel */ workmanagerChannel.bind('updatejob', function (data) { jQuery.each($scope.jobs, function(index, value){ if(value.id == data.id) { $scope.jobs[index] = data; return; } }); }); /** * Bind delete job function to workmanager Pusher channel */ workmanagerChannel.bind('deletejob', function (data) { jQuery.each($scope.jobs, function(index, value){ if(value.f_job_num == data.f_job_num) { $scope.jobs.splice(index, 1); return; } }); }); });

這工作得很好，直到我說CSS過渡到進度條，使他們順暢。進度條現在會做一些奇怪的事情，比如添加或刪除一行時倒退。我知道這是爲什麼，但不知道如何解決。

這是過渡CSS：

.progress-inner { -webkit-transition: width 1s ease-in-out; -moz-transition: width 1s ease-in-out; -o-transition: width 1s ease-in-out; transition: width 1s ease-in-out; }

說出表4行開始 - 我們姑且稱之爲A，B，C和D列B通過從網絡插口的信號移除。然後行C和D（位於位置3和4）向上移動以分別填充位置2和3。看起來會發生什麼是第2行中的進度條從B的進度值轉換爲C.並且與第3行中的進度條相同 - 它從C的進度值動畫到進度值D。

我希望Angular在物理上刪除第二個錶行，但實際上它似乎重新映射數據（導致發生轉換），然後刪除表的最後一行。

如果在現有行之前添加一行，則會發生同樣的情況。

有沒有人有任何想法如何解決這個問題？

來源

2014-02-11 theandywaite

當解決代碼問題時，一些代碼可能會有幫助:) – Sprottenwels

沒問題 - 沒想到它會增加很多，但我會用一些片段更新該帖子。 – theandywaite

@naxtek我們需要你添加的代碼時：'它工作正常，直到我添加CSS動畫' – A1rPun

【本文地址】

進度條在AngularJS中反向

進度條在AngularJS中反向

今日新闻

推荐新闻