Question

所以我试图创建一个与自定义过滤器一起使用的自定义指令。因此，该指令基本上应用于表头，以根据用户输入过滤行。如果我不使用指令，但我想使用指令，但不确定是否缺少它，可以正常工作。

这是我的过滤器：

.filter('comparisonFilter', function() {
    return function(input, filterObject) {
        if(filterObject === undefined || !filterObject.value || filterObject.value === "" || !filterObject.type || filterObject.type === "") return input;

        console.log(filterObject);
        var property = filterObject.property, 
            value = filterObject.value,
            type = filterObject.type;

        return _.filter(input, function(obj) {
            if(type === ">=") return (obj[property] > value || obj[property] == value);
            else if(type === "<=") return (obj[property] < value || obj[property] == value);
            else if(type === "=") return obj[property] == value;
        });
    };
});

指令：

.directive('comparisonFilter', function(){
    return {
        restrict: 'EA',
        template: `
            <select data-ng-model="comparisonFilterData.type">
                <option value="" selected>Select Filter</option>
                <option value=">=">>=</option>
                <option value="<="><=</option>
                <option value="=">=</option>
            </select>
            <input type="text" data-ng-model="comparisonFilterData.value"
                   class="form-control input-sm">
        `,
        scope: {
            property: '='
        },
        link: function(scope, element, attrs) {
            scope.comparisonFilterData = {
                type: '',
                value: '',
                property: attrs.property,
            };
        }
    }
});

html文件：

<table>
<thead>
    <tr>
        <th>
            <data-comparison-filter property="something" />
        </th>
    </tr>
</thead>
<tbody>
    <tr data-ng-repeat="item in resultValue=(items | comparisonFilter: comparisonFilterData)">
        <td>
            <span>{{item.something}}</span>
        </td>
    </tr>
</tbody>

如何在angularjs的自定义指令中包含自定义过滤器？

0 个答案: