Question

在我的角度应用程序中，我遇到了与过滤器相关的问题。我已经通过简单的现场演示重现了这个问题：

https://jsfiddle.net/baoqger/fpo3j6gx/2/

<div ng-app="app">
    <div ng-controller="filterCtrl as f">
        <input type="text" ng-model="f.inputdata"></input>
        <span ng-click="f.setFilter('lowercase')">First Filter</span>
        <span  ng-click="f.setFilter('uppercase')">Second Filter</span>
    <div ng-bind="f.inputdata | f.filtername"></div>
</div>

点击First Filter或Second Filter将触发setFilter功能。

function filterCtrl() {
    this.setFilter = function ( name ){
        this.filtername = name;
    }.bind(this);
}

angular
    .module('app', [])
    .controller('filterCtrl', filterCtrl)

在控制器中，filtername将设置为小写或大写，取决于如上所述单击了哪个按钮。
然后将filtername设置为过滤方法，如下所示：

<div ng-bind="f.inputdata | f.filtername"></div>

但根据错误信息，似乎角度系统无法支持此类用法。有什么帮助吗？

Answer 1

试试这个solution：

<强>使用Javascript：

.controller('filterCtrl', ['$filter' function($filter){
     var self = this;
     self.setFilter = function(name){
         self.filter = $filter(name);
     }
}]);

<强> HTML：

<div ng-app="app">
    <div ng-controller="filterCtrl as f">
        <input type="text" ng-model="f.inputdata"></input>
        <span ng-click="f.setFilter('lowercase')">First Filter</span>
        <span  ng-click="f.setFilter('uppercase')">Second Filter</span>
    <div ng-bind="f.filter?f.filter(f.inputdata):f.inputdata"></div>
</div>

angularjs：无法使用范围数据

1 个答案: