angularjs:为什么过滤器不起作用?

时间:2016-10-09 18:19:07

标签: angularjs

请帮助修复脚本。

HTML:

            <li ng-repeat="date in dateArr | dateFormatter}">
                <span class="date">{{date}}</span>
            </li>

JS:

angular.module('App', [])
    .controller('lsController', function ($scope) {
        $scope.dateArr = [
            '10.10.2016',
            '11.10.2016',
            '12.10.2016',
            '13.10.2016',
            '14.10.2016',
            '15.10.2016'
        ];   

        /*$scope.dateFormatter = function(date) {
            return date.slice(0, 6);               
        }*/     
    })
    .filter('dateFormatter', function (date) {
        return date.slice(0, 6); 
    });      

我使用角1.4.8

JSFIDDLE

我需要使用过滤器,它会切断日期字符串

2 个答案:

答案 0 :(得分:2)

您的过滤器构造不正确。

过滤器需要返回一个包含过滤参数的函数,并返回结果

create proc GetDomesticPrice (
@SKU varchar(50), 
@CustomerGroupID INT, 
@Qty INT
AS
BEGIN
Declare @BasePrice money = 0
Declare @CurrentTierPrice money = 0
Declare @Tier1Price money = 0
Declare @Tier2Price money = 0
Declare @Tier3Price money = 0
Declare @SetupPrice money = 0
declare @TempPrices table
(
BlankCapPrice money,
CurrentTierPrice  money,
Tier1Price money,
Tier2Price money,
Tier3Price money,
SetupPrice money
)
Exec CalculateDomesticPrice @SKU, @CustomerGroupID, @Qty, @BasePrice OUTPUT,         @CurrentTierPrice OUTPUT, @Tier1Price OUTPUT, @Tier2Price OUTPUT, @Tier3Price OUTPUT, @SetupPrice OUTPUT
Insert into @TempPrices values (@BasePrice, @CurrentTierPrice, @Tier1Price, @Tier2Price, @Tier3Price, @SetupPrice)
select @BasePrice, @CurrentTierPrice, @Tier1Price, @Tier2Price, @Tier3Price, @SetupPrice
END

然后你有这个设置在ng-repeat中过滤但是把它放在那里需要返回一个过滤的数组,而不是字符串输入和操作。所以它需要放在传递字符串的地方

.filter('dateFormatter', function () {
      return function(dateString){
         return dateString.slice(0, 6); 
      }
});

https://jsfiddle.net/awxsqLbc/

答案 1 :(得分:0)

您的过滤器错误。检查de filter documentation了解更多详情

.filter('dateFormatter', function () {
    return function(date){
        return date.slice(0, 6)
    } 
});  

您使用过滤器的方式也是错误的。从ng-repeat

中取出
<span class="date">{{date | dateFormatter }}</span>

FIDDLE