Question

我有一个重复的HTML代码，只有非常小的变化。）这种和平的HTML只是在表格中显示JSON对象，如下所示：

<thead>
<tr>
    <th>Employee</th>
    <th>Start date</th>
    <th>End date</th>
    <th>status</th>
    <th>Select</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="oneRecord in currentEmployeeData.RecordsOfJSONS|filter : {status: 'pending'}">
    <td>{{oneRecord.employee.personalInfo.firstName + ' ' + oneRecord.employee.personalInfo.lastName}}</td>
    <td>{{oneRecord.startDate}}</td>
    <td>{{oneRecord.endDate}}</td>
    <td>{{oneRecord.status}}</td>
    <td>
        <div ng-if="oneRecord.status === 'created' ">
            <cs-checkbox ng-model="oneRecord"
                         ng-click="collectRequests(oneRecord)"></cs-checkbox>
        </div>
    </td>
</tr>
</tbody>
</table>

这里有两个重要方面：

1）过滤记录：有时我想根据“状态”进行过滤。 JSON对象的字段。因为它在此示例中可见，有时可以通过其他字段显示，例如＆＃39; startDate＆＃39;。

2）表格的最后一列显示了一个基于＆＃39;状态＆＃39;的值的复选框。领域。在这种情况下，如果＆＃39; status === created＆＃39;然后显示复选框。在其他情况下，复选框应根据状态字段的另一个值显示。

由于该表以几乎相同的模式重复，我决定使用AngularJS的指令可能性实现它如下：

m.directive("csHolidayTable", [function () {
        return {
            restrict: "E",
            scope: {
                JSONrecords: "=",
                filtervalue: "=",
                filterparameter : "=",
                checkboxcondition: "="
            },

            template:'<table class="cs-table-01">' +
            '<thead> <tr> +
            '<th>Employee</th>' +
            '<th>Start date</th>' +
            '<th>End date</th>' +
            '<th>Status</th>' +
            '<th>Select</th>' +
            ' </tr> </thead> ' +
            '<tbody> <tr ng-repeat="oneRecord in holidays|filter : { filterparameter : filtervalue }">' +
            '<td>{{oneRecord.employee.personalInfo.firstName + " " + oneRecord.employee.personalInfo.lastName}}</td> ' +
            '<td>{{oneRecord.startDate}}</td> ' +
            '<td>{{oneRecord.endDate}}</td>' +
            '<td>{{oneRecord.status}}</td> '+
            '<td> <div ng-if="oneRecord.status === checkboxcondition"><cs-checkbox ng-model="oneRecord" ng-click="collectRequests(oneRecord)"></cs-checkbox> </div> </td> </tr></tbody></table>',

            controller : function ($scope) {
                //this part implements checkbox functionality.
                var firstVal = null;
                var secondVal = null;
                var counter = 0;
                multipleRequests = [];
                $scope.collectRequests = function (oneRequest) {
                    counter = counter + 1;
                    if (counter == 1) {
                        firstVal = oneRequest;
                    } else if (counter == 2) {
                        secondVal = oneRequest;
                        if (secondVal === true) {
                            multipleRequests.push(firstVal);
                            counter = 0;
                        } else {
                            multipleRequests.pop(firstVal);
                            counter = 0;
                        }
                    }
                }
            }
        };
    }]);

然后在我的HTML代码中，我只使用了这个自定义HTML标记，如下所示：

   <cs-holiday-table JSONrecords="currentEmployeeData.RecordsOfJSONS" checkboxcondition = "'pending'" filterparameter="'status'" filtervalue="'created'"></cs-holiday-table>

或其他地方：

   <cs-holiday-table JSONrecords="currentEmployeeData.RecordsOfJSONS" checkboxcondition = "'created'" filterparameter="'startDate'" filtervalue="'2015-01-02'"></cs-holiday-table>

现在出现问题：复选框显示正确，可能是因为它只是指令的HTML模板部分中的ng-if条件。但过滤器不起作用。我不明白为什么我也使用了这个行指令defenition，但仍然没有结果：

<tr ng-repeat="oneRecord in holidays|filter : { {{filterparameter}} : filtervalue }">

任何人都知道如何实施这种类型的灵活过滤＆＃39; ？ JSON字段及其所需值都从HTML传递到指令。如果有详细的解决方案，我将不胜感激。

Answer 1

我认为这是因为在AngularJS中，“filterparameter”不会被“startDate”或“status”覆盖。 ~~而不是你可以尝试在过滤器中使用2个参数：一个用于名称，另一个用于值。~~

~~顺便说一句，您还可以使用浏览器开发人员工具在过滤器中添加断点来评估传递的值。这样您就可以检查是否覆盖了filterparameter。~~

编辑： 您将2个值传递给指令并在ng-repeat中使用它。将您的指令更改为单个属性，如'filterconditions'，并将json格式设置为以下<cs-holiday-table JSONrecords="currentEmployeeData.RecordsOfJSONS" checkboxcondition = "'created'" filterconditions="{ 'startDate' : '2015-01-02' }"></cs-holiday-table>

并在您的指令中使用： <tr ng-repeat="oneRecord in holidays | filter : filterconditions">

这样你也可以根据多个值设置条件 {'status'：'created'，'startDate'：'2015-01-02'}或单个值{{status'：'created'}或{'startDate'：'2015-01-02'} < / p>

casting as varchar(large-enough-value)

我希望这会有所帮助。

Answer 2

我尝试在指令中使用两个过滤器，但没有一个成功运行。

<tr ng-repeat="oneRecord in holidays|filter : { status : filtervalue}|filter : { startDate : filtervalue}">

或者这个：

<tr ng-repeat="oneRecord in holidays|filter : { status : filtervalue}|{ startDate : filtervalue}">

或

<tr ng-repeat="oneRecord in holidays|filter : { status : filtervalue| startDate : filtervalue}">

AngularJS Directive

2 个答案: