Angularjs中的子字符串使用過濾器？

Question

我有以下我想使用Angularjs和一些過濾器在DOM中操作的數組

$scope.urls = [{
    path: 'http://a.com/index'        
    }, {
     path: 'http://a.com/home'        
    }, {
    path: 'http://a.com/etc'        
    }, {
    path: 'http://a.com/all'        
   }];

我曾嘗試使用過濾器對路徑進行子串化，但無法正常工作。

小提琴演示

任何幫助都很棒。

Answer 1

試試這個：

HTML

<div ng-controller = "fessCntrl"> 
  <h1>Only path without domain name:</h1>
        <ul>
            <li ng-repeat="url in urls | myCustomFilter">{{url.path}}</li>
        </ul>
</div>

JS

var fessmodule = angular.module('myModule', []);

fessmodule.controller('fessCntrl', function ($scope) {
     $scope.urls = [{
        path: 'http://a.com/index'        
    }, {
         path: 'http://a.com/home'        
    }, {
        path: 'http://a.com/etc'        
    }, {
        path: 'http://a.com/all'        
    }];

    $scope.otherCondition = true;
});
fessmodule.$inject = ['$scope'];

 fessmodule.filter('myCustomFilter', function() {
   return function( urls) {
    var filtered = [];

    angular.forEach(urls, function(url) {
        filtered.push( {path:url.path.substring("http://a.com".length, url.path.length)});
    });

    return filtered;
  };
});

演示小提琴

附帶說明：

嘗試將過濾器寫出控制器。

Answer 2

AngularJS v 1.4.5支持帶有參數length和offset的數組（包括字符串）的標准“ limitTo”過濾器：

<div ng-controller = "SampleController"> 
  <h1>Result of substring equivalent filter:</h1>
        <ul>
            <li ng-repeat="url in urls">{{url.path | limitTo:5:12}}</li>
        </ul>
</div>

注意 ：在動態域長度（“ http://a.com ”靜態長度為12）的情況下，此解決方案將失敗。

注2 ：將長度增加到路徑的最大結果長度（最大為長度為5的“索引”）。

開箱即用的AngularJS支持的所有過濾器的概述 。