Question

我刚开始使用AngularJS，我试图将jQuery数据转换为Angular。我有一个表，它使用angular-datables plugin正确显示为数据表。

然而，另外我想要一组按钮按日期范围过滤表格。默认过滤器运行良好，但输入没有任何反应。 NG-点击。

我将不胜感激任何帮助。谢谢。

HTML

<div class="col-md-6" ng-app="dashboardApp" ng-controller="expiryDataCtrl as showCase">
<div class="portlet light ">
    <div class="portlet-title">
        <div class="caption font-dark">
            <i class="icon-settings font-dark"></i>
            <span class="caption-subject bold uppercase"> Expiring Certificates</span>
        </div>
        <div class="actions">
            <div class="btn-group btn-group-devided" data-toggle="buttons">
                <label class="btn btn-transparent dark btn-outline btn-circle btn-sm">
                    <input type="radio" name="options" ng-click="showCase.setDateToCompare(7)" class="toggle" id="option1">7 days
                </label>
                <label class="btn btn-transparent dark btn-outline btn-circle btn-sm active">
                    <input type="radio" name="options" ng-click="showCase.setDateToCompare(30)" class="toggle" id="option2">30 days
                </label>
                <label class="btn btn-transparent dark btn-outline btn-circle btn-sm">
                    <input type="radio" name="options" ng-click="showCase.setDateToCompare(90)" class="toggle" id="option3">90 days
                </label>
            </div>
        </div>
    </div>
    <div class="portlet-body">
        <table class="table table-striped table-bordered table-hover table-checkable order-column" id="expiryTable"
            datatable="ng" dt-options="showCase.dtOptions" dt-column-defs="showCase.dtColumnDefs" >
            <thead>
                <tr>
                    <th> Employee </th>
                    <th> Course </th>
                    <th> Expiry Date </th>
                    <th style="width: 80px"> </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="x in showCase.data.items | filter: showCase.lessThan('ExpiryDate', showCase.dateToCompare)">
                    <td>{{ x.FullName }}</td>
                    <td>{{ x.CourseName }}</td>
                    <td>{{ x.ExpiryDate | date: 'dd-MMM-yyyy' }}</td>
                    <td>
                        <a class="btn btn-sm btn-primary" ng-href="Training/TrainingDetail.aspx?ID={{x.TrainingID}}" target="_blank">Details</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

的Javascript

<script type="text/javascript">
    var app = angular.module('dashboardApp', ['datatables', 'ngResource']);

    app.controller('expiryDataCtrl', expiryDataCtrl);

    function expiryDataCtrl ($resource, $http, DTOptionsBuilder, DTColumnDefBuilder, DTDefaultOptions) {
        var vm = this;
        vm.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers').withOption('order', [2, 'asc']);;
        vm.dtColumnDefs = [
            DTColumnDefBuilder.newColumnDef(3).notSortable()
        ];

        $http.post('../WS/Dashboard.asmx/GetExpiryTable', {})
            .success(function (data, status, headers, config) {
                vm.data = JSON.parse(data.d);
            }
        );

        vm.dateToCompare = moment().add(30, 'days');

        vm.lessThan = function(prop, val){
            return function(item){
                return moment(item[prop]) <= val;
            }
        };

        vm.setDateToCompare = function(days){
            vm.dateToCompare = moment().add(days, 'days');
        };
    };
</script>

Answer 1

刚刚找到了解决方案：输入类型＆＃34; radio＆＃34;不支持ng-click。所以，我已经将输入更改为按钮，现在它可以正常工作。

Ng-click不会在带有数据表插件的AngularJS中触发

1 个答案: