由角度過濾器截斷的打印字符串

在我的Angular應用程序中，我構建了一個視圖，其目的是以便於打印的方式顯示數據。由角度過濾器截斷的打印字符串

不過，我還增加了顯示更多/更少的文字與角度filter，削減strings字符的預定義的數量，並允許用戶通過點擊一個按鈕，像這樣看，其餘的選項：{{elem | cut:!show[$index]:true:max}}。

下面是完整的過濾器：

angular.module('pear').filter('cut', function() { 
    return function (value, enabled, wordwise, max, tail) { 

     if (!value) return ''; 
     max = parseInt(max, 10); 
     if (!max) return value; 
     if(!enabled) return value; 
     if (value.length <= max) return value; 

     value = value.toString().substr(0, max); 
     if (wordwise) { 
      var lastspace = value.lastIndexOf(' '); 
      if (lastspace != -1) { 
       value = value.substr(0, lastspace); 
      } 
     } 

     return value + (tail || '...'); 
    }; 
});

，這是它是如何結束了尋找：

有沒有一種方法來禁用此filter的打印預覽，或以某種方式用@media print強制css條件顯示全文？

供參考，這是我目前如何使用模板中的過濾器，如果需要使用不同的標記方法：

<div class="content"> {{elem | cut:!show[$index]:true:max}} 
    <span ng-show="!show[$index] && elem.length > max" class="show-more" ng-click="toggleShow($index)">more</span> 
    <span ng-show="show[$index]" class="show-more no-print" ng-click="toggleShow($index)">less</span> 
</div>

來源

2015-09-16 Tiago

爲什麼不添加第二個來顯示未截斷的字符串併爲其分配一些@media print css？ – Trike

@Trike是的，這可能是最好的，如果不是唯一的方法。 – Tiago

檢查工作演示：JSFiddle。

將以下代碼添加到您的控制器。邏輯是：在打印之前，禁用過濾器。打印後重新啓用它。使用window.matchMedia來檢測它是否正在打印。

注：小心關於瀏覽器兼容性（IE> = 10，歌劇> = 12.1等）

這種解決方案的優點是：可以控制不僅通過圖CSS。其實你可以設計你的看法專門打印。當然，打印完後你需要恢復以前的狀態。

if (window.matchMedia) { 
    var mediaQueryList = window.matchMedia('print'); 
    mediaQueryList.addListener(function (mql) { 
     $scope.$apply(function() { 
      var isPrinting = mql.matches; 
      $scope.enabled = !isPrinting; 
     }); 
    }); 
}

來源

2015-09-17 09:53:34 Joy

啊！這樣好多了，我真的不喜歡我的html中額外的混亂。謝謝！ – Tiago

我結束了我的sass文件中使用@media print，並創建一對夫婦類，這將有助於我強行隱藏或顯示特定的元素，我認爲合適的，就像這樣：

@media print { 
    .no-print, .no-print * { 
     display: none !important; 
    } 
    .force-print, .force-print * { 
     display: block !important; 
    } 
    html, body, .main-content { 
     margin: 0; 
     padding: 0; 
     width: 100%; 
    } 
}

我已經通過創建兩個<span>元素，一個與類使用他們在我的模板0，其中包括截斷的字符串，另一個類.force-print和hidden，其中包括沒有任何過濾器的元素。

<div class="content"> 
    <span class="no-print">{{elem | cut:!show[$index]:true:max}}</span> 
    <span class="hidden force-print">{{elem}}</span> 
</div>

在打印時，.force-print將覆蓋引導的hidden類，顯示出是否則對用戶不可見的元素。

來源

2015-09-17 09:08:19 Tiago

由角度過濾器截斷的打印字符串

回答

相關問題