javascript - Angularjs 中的子字符串使用过滤器?

标签 javascript angularjs

我有以下数组,我想使用 Angularjs 和一些过滤器在 DOM 中操作

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

我曾尝试使用过滤器对路径进行子字符串化,但它不起作用。

Fiddle Demo

任何帮助都很棒。

最佳答案

试试这个:

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;
  };
});

演示 Fiddle

作为旁注:

尝试在 Controller 之外编写过滤器。

关于javascript - Angularjs 中的子字符串使用过滤器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20394181/

相关文章:

javascript - 当 div 为视口(viewport)顶部 x 像素数量时添加一个类

javascript - $resource `get` 函数如何在 AngularJS 中同步工作?

.net - 如何将哈希表发送到 asmx web 服务?

javascript - 类型 '(priority1: number, priority2: number) => number' 的参数不可分配给类型 '(a: unknown, b: unknown) => number' 的参数

javascript - 如何在不向函数添加代码的情况下向现有 JavaScript 函数添加回调函数?

angularjs - Web 应用程序尝试在 AngularJS 加载之前检索数据

javascript - 从单个服务调用返回多个“独立”异步结果的正确 Angular 模式是什么

javascript - 导出通过循环生成的多个 Highcharts 到单个 pdf

javascript - angularjs序列化表单数据

javascript - AngularJs 工厂下的独立函数