Javascript 在ng repeat中动态应用格式筛选器_Javascript_Angularjs_Dynamic_Filter

Javascript 在ng repeat中动态应用格式筛选器

javascript angularjs dynamic filter

Javascript 在ng repeat中动态应用格式筛选器,javascript,angularjs,dynamic,filter,Javascript,Angularjs,Dynamic,Filter,我的目标是应用设置为循环对象属性的格式筛选器。获取此对象数组： [ { "value": "test value with null formatter", "formatter": null, }, { "value": "uppercase text", "formatter": "uppercase", }, { "value": "2014-01-01", "formatter": "date", } ] 我试图

我的目标是应用设置为循环对象属性的格式筛选器。

获取此对象数组：

[
  {
    "value": "test value with null formatter",
    "formatter": null,
  },
  {
    "value": "uppercase text",
    "formatter": "uppercase",
  },
  {
    "value": "2014-01-01",
    "formatter": "date",
  }
]

我试图编写的模板代码如下：

<div ng-repeat="row in list">
    {{ row.value | row.formatter }}
</div>

但很明显，这段代码会抛出一个错误：

Unknown provider: row.formatterFilterProvider <- row.formatterFilter

未知提供程序：row.formatterFilterProvider使其工作的一种方法是使用函数进行绑定，并在该函数中进行过滤。这可能不是最好的方法：
<div ng-repeat="row in list">
  {{ foo(row.value, row.filter) }}
</div>

<div ng-repeat="row in list">
    {{ row.value | picker:row.formatter }}
</div>

app.filter('picker', function($filter) {
  return function(value, filterName) {
    return $filter(filterName)(value);
  };
});

<p>2 + 3 + 5 = {{ 2 | add:3:5 }}</p>
<p>7 + 9 + 11 = {{ 7 | useFilter:'add':9:11 }}</p>

app.filter('useFilter', function($filter) {
    return function() {
        var filterName = [].splice.call(arguments, 1, 1)[0];
        return $filter(filterName).apply(null, arguments);
    };
});

|
是一个角度构造，用于查找具有该名称的已定义过滤器，并将其应用于左侧的值。我认为您需要做的是创建一个以过滤器名称为参数的过滤器，然后调用相应的过滤器（改编自M59的代码）：
HTML:
$scope.list = [
  {"value": "uppercase text", "filter": "uppercase"}
];
$scope.foo = function(value, filter) {
  return $filter(filter)(value);
};

感谢@karlgold的评论，这里有一个支持参数的版本。第一个示例使用add
筛选器直接将数字添加到现有数字，第二个示例使用useFilter
筛选器选择add
按字符串筛选并向其传递参数：
HTML:
$scope.list = [
  {"value": "uppercase text", "filter": "uppercase"}
];
$scope.foo = function(value, filter) {
  return $filter(filter)(value);
};

我喜欢这些答案背后的概念，但不认为它们提供了最灵活的解决方案
我真正想做的，我相信一些读者也会有同样的感受，就是能够动态地传递一个过滤器表达式，然后它将计算并返回适当的结果
因此，单个自定义筛选器将能够处理以下所有内容：
{{amount |选择器：'currency:$“：0'}}

{{date | picker:'date:'yyyyy-MM-dd HH:MM:ss-Z'}

{{name | picker:'saltation:'Hello'}
//应用另一个自定义筛选器
我提出了以下代码，它将$interpolate
服务应用到我的自定义过滤器中。见：
Javascript
myApp.filter('picker', function($interpolate ){
    return function(item,name){
       var result = $interpolate('{{value | ' + arguments[1] + '}}');
       return result({value:arguments[0]});
    };
});

我的需求略有不同，因此对上述答案进行了一些修改（$interpolate
解决方案达到了相同的目标，但仍然有限）：
（percentage
是一个自定义过滤器，它建立在number
的基础上）
这篇文章中对Jason Goemaat的赞扬
下面是我如何使用它
$scope.table.columns = [{ name: "June 1 2015", filter: "date" },
                        { name: "Name", filter: null },
                       ] etc...

<td class="table-row" ng-repeat="column in table.columns">
  {{ column.name | applyFilter:column.filter }}
</td>

app.filter('applyFilter', [ '$filter', function( $filter ) {
  return function ( value, filterName ) {
    if( !filterName ){ return value; } // In case no filter, as in NULL.
    return $filter( filterName )( value );
  };
}]);

$scope.table.columns=[{name:“2015年6月1日”，filter:“date”}，
{name:“name”，筛选器：null}，
]等等。。。
{{column.name | applyFilter:column.filter}
app.filter（'applyFilter'，['$filter'，函数（$filter）{
返回函数（值、过滤器名称）{
if（！filterName）{return value；}//如果没有筛选器，则为NULL。
返回$filter（filterName）（值）；
};
}]);
我改进了@Jason Goemaat的答案，添加了一个检查过滤器是否存在的选项，如果没有，则默认返回第一个参数：
.filter('useFilter', function ($filter, $injector) {
    return function () {
        var filterName = [].splice.call(arguments, 1, 1)[0];
        return $injector.has(filterName + 'Filter') ? $filter(filterName).apply(null, arguments) : arguments[0];
    };
});

更新版本的ng table允许基于列配置创建动态表（ng dynamic table）。格式化日期字段与将格式添加到列数组中的字段值一样简单
给定
{
“名称”：“测试代码”，
“日期信息”：{
“创建日期”：1453480399313
“更新日期”：1453480399313
}
}
列=[
{field:'object.name'，title:'name'，sortable:'name'，filter:{name:'text'}，show:true}，
{字段：“object.dateInfo.createDate |日期：'MMM dd yyyy-HH:mm:ss a'，标题：'Create date'，可排序：'object.dateInfo.createDate'，show:true}
]
{{$eval（column.field，{object:row}}}
我最终做了一些更粗糙的事情，但不太涉及：
HTML:
$scope.list = [
  {"value": "uppercase text", "filter": "uppercase"}
];
$scope.foo = function(value, filter) {
  return $filter(filter)(value);
};

使用三元运算符检查是否为行定义了筛选器：
ng-bind="::data {{row.filter ? '|' + row.filter : ''}}"

JS:
$scope.list = [
  {"value": "uppercase text", "filter": "uppercase"}
];
$scope.foo = function(value, filter) {
  return $filter(filter)(value);
};

在Javascript中的数据数组中添加过滤器：
, {
        data: 10,
        rowName: "Price",
        months: [],
        tooltip: "Price in DKK",
        filter: "currency:undefined:0"
    }, {

这就是我使用的（Angular版本1.3.0-beta.8偶发俳句）
此过滤器允许您使用带或不带过滤器选项的过滤器
applyFilter将检查过滤器是否在Angular中存在，如果过滤器不存在，则浏览器控制台中将显示一条带有过滤器名称的错误消息，如下所示
以下过滤器不存在：绿香蕉
使用ng repeat时，某些值将未定义applyFilter将通过软故障处理这些问题
app.filter( 'applyFilter', ['$filter', '$injector', function($filter, $injector){

  var filterError = "The following filter does not exist: ";

  return function(value, filterName, options){

    if(noFilterProvided(filterName)){ return value; }
    if(filterDoesNotExistInAngular(filterName)){ console.error(filterError + "\"" + filterName + "\""); return value; }
    return $filter(filterName)(value, applyOptions(options));
  };

  function noFilterProvided(filterName){
    return !filterName || typeof filterName !== "string" || !filterName.trim();
  }

  function filterDoesNotExistInAngular(filterName){
    return !$injector.has(filterName + "Filter");
  }

  function applyOptions(options){
    if(!options){ return undefined; }
    return options;
  }
}]);

然后，您可以使用您想要的任何过滤器，这些过滤器可能有选项，也可能没有选项
// Where, item => { name: "Jello", filter: {name: "capitalize", options: null }}; 
<div ng-repeat="item in items">
  {{ item.name | applyFilter:item.filter.name:item.filter.options }}
</div>

然后在HTML中，您的过滤器可能还需要行中的一个键
// Where row => { color: "blue", addThisToo: "My Favorite Color" };
// column => { name: "color", filter: { name: "capitalize", options: "whatever filter accepts"}};
<tr ng-repeat="row in rows">
  <td ng-repeat="column in columns">
    {{ row[column.name] | applyFilter:column.filter.name:column.filter.options:row.addThisToo }}
  </td>
</tr>

//其中row=>{color:“blue”，addThisTo:“我最喜欢的颜色”}；
//列=>{name:“color”，过滤器：{name:“capitalize”，选项：“过滤器接受的任何内容”}；
{{row[column.name]| applyFilter:column.filter.name:column.filter.options:row.addThisTow}
谢谢，但这不是我想要的。我想格式化“value”字符串，将“filter”值作为格式化程序。请看一下plunkr。@user3259152我用一个解决方案更新了。我会继续调查。很抱歉，我的帖子可能不清楚：我不需要过滤数组。我需要根据“formatter”属性格式化“value”字符串。好主意！奇怪的是，这在角形内核中还不存在。我认为现在这是最好的方法，比m59的方法更优雅——当然这也是可行的。正如您所说，“row.formatter”是一个字符串，应该是一个函数名，以使代码正常工作；如果没有将其解析为函数的解决方案，那么这似乎是唯一的解决方法。谢谢大家!！这个版本有点花哨，它支持过滤器规范的参数（例如日期格式或小数位数）：并添加“过滤器”`到行尾，从var filterName
开始处理未定义筛选器的情况。这将从参数数组中删除filterName，以便将其余参数传递给fi
// Where, item => { name: "Jello", filter: {name: "capitalize", options: null }}; 
<div ng-repeat="item in items">
  {{ item.name | applyFilter:item.filter.name:item.filter.options }}
</div>

// Where row => { color: "blue" };
// column => { name: "color", filter: { name: "capitalize", options: "whatever filter accepts"}};
<tr ng-repeat="row in rows">
  <td ng-repeat="column in columns">
    {{ row[column.name] | applyFilter:column.filter.name:column.filter.options }}
  </td>
</tr>

// In applyFilter, replace this line
return function(value, filterName, options){
// with this line
return function(value, filterName, options, newData){

// and also replace this line
return $filter(filterName)(value, applyOptions(options));
// with this line
return $filter(filterName)(value, applyOptions(options), newData);

// Where row => { color: "blue", addThisToo: "My Favorite Color" };
// column => { name: "color", filter: { name: "capitalize", options: "whatever filter accepts"}};
<tr ng-repeat="row in rows">
  <td ng-repeat="column in columns">
    {{ row[column.name] | applyFilter:column.filter.name:column.filter.options:row.addThisToo }}
  </td>
</tr>