5

Angular Smart Table ( http://lorenzofox3.github.io/smart-table-website/ )に日付範囲フィルターを適用しようとしていますが、それを行うことができませんでした。私がオンラインで見ている唯一の例は、http://plnkr.co/edit/Idbc1JNHKylHuX6mNwZ6?p=previewも壊れています。

これは私のHTMLです：

<div st-table="releaseListDisplay" st-safe-src="releaseList">
        <div class="filter-box">
            <st-date-range></st-date-range>
        </div>
        <table class="list-page">
            <thead>
                <tr>
                    <th st-sort="releaseNum">Release#</th>
                    <th class="p15">Product Name</th>
                    <th st-sort="dateInternalRelease">Int. Release Date</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="release in releaseListDisplay">
                    <td>{{release.releaseNum}}</td>
                    <td>{{release.buildNum}}</td>
                    <td>{{release.dateInternalRelease | date:'yyyy-MM-dd'}</td>

                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="9">
                        <div st-pagination="" st-items-by-page="10"></div>
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>

これは、st-date-range ディレクティブの template.html ファイルの内容です。

<label for="fromdate">From:</label>
<input type="date" name="fromdate" id="fromdate" 
       placeholder="MM/DD/YYYY" ng-model="fromDate"/>
<label for="todate">To:</label>
<input type="date" name="todate" id="todate" 
       placeholder="MM/DD/YYYY" ng-model="toDate"/>

そして、これはディレクティブです：

app.directive('stDateRange', function($timeout){
return{
    restrict:'E',
    require:'^stTable',
    templateUrl:'template.html',
    scope:false,
    link: function(scope,element,attr,ctrl){
        var tableState = ctrl.tableState();
        scope.$watchGroup(["fromDate","toDate"],
                function(newValues,oldValues){

                    if(newValues){
                        var start = newValues[0];
                        var end = newValues[1];
                        if(start && end){
                            var d1 = new Date(start);
                            var d2 = new Date(end);
                            ctrl.search({after:d1.getTime(),before:d2.getTime()},'dateInternalRelease');

                        }
                    }

                }
        );
    }
};

});

また、 $filter を使用して、コンパレータ関数を使用して releaseList のレコードを除外しようとしましたが、スマートテーブルのページネーションが壊れます。

私は本当にここでいくつかの迅速な助けが必要です. どうもありがとうございました！

4

1 に答える 1

3

誰かが役に立つと思った場合に備えて、私のソリューションを投稿してください:

以下のようにカスタムフィルターを作成し、それをビューテンプレートで次のように使用する必要がありました: st-set-filter="customFilter"

    app.filter('customFilter', ['$filter', function ($filter) {
            var filterFilter = $filter('filter');
            var standardComparator = function standardComparator(obj, text) {
                text = ('' + text).toLowerCase();
                return ('' + obj).toLowerCase().indexOf(text) > -1;
            };

            return function customFilter(array, expression) {
                function customComparator(actual, expected) {
                    var isBeforeActivated = expected.before;
                    var isAfterActivated = expected.after;
                    var higherLimit, lowerLimit;
                    var itemDate, queryDate;

                    if (angular.isObject(expected)) {
                        //date range
                        if (expected.before || expected.after) {
                            try {
                                if (isBeforeActivated) {
                                    higherLimit = expected.before;
                                    itemDate = new Date(actual);
                                    queryDate = new Date(higherLimit);

                                    //if (actual > higherLimit) {
                                    if (itemDate > queryDate) {
                                        return false;
                                    }
                                }

                                if (isAfterActivated) {
                                    lowerLimit = expected.after;
                                    itemDate = new Date(actual);
                                    queryDate = new Date(lowerLimit);

                                    //if (actual < lowerLimit) {
                                    if (itemDate < queryDate) {
                                        return false;
                                    }
                                }

                                return true;
                            } catch (e) {
                                return false;
                            }

                        } 

                        return true;
                    }
                    return standardComparator(actual, expected);
                }

                var output = filterFilter(array, expression, customComparator);
                return output;
            };
        }]);
于 2015-07-02T20:37:42.177 に答える