单击按钮时调用AngularJS函数不起作用

时间:2019-02-05 10:11:01

标签: javascript html angularjs angularjs-ng-click

我有一个要求,我想在单击按钮时调用 RouterFunction<ServerResponse> json = route() .nest(accept(APPLICATION_JSON), builder -> builder .GET("/{id}", personHandler::findOnePerson) .GET("", personHandler::findAllPeople)).build(); RouterFunction<ServerResponse> html = route() .nest(accept(TEXT_HTML), builder -> builder .GET("/{id}", personHandler::renderPerson) .GET("", personHandler::renderPersons)).build(); return route() .path("api/person", () -> html.and(json)) // the default would be the first one(here is html) .build(); 函数。所以我尝试如下

angularJS
var app2 = angular.module('grdContrl', ['datatables']);
app2.controller('dtAssignVendor', ['$scope', '$http', 'DTOptionsBuilder', 'DTColumnBuilder',
    function ($scope, $http, DTOptionsBuilder, DTColumnBuilder) {

        $scope.GetFiler = function () {
            var strZone = $('#SAPExecutive_R4GState').val();
            var strUtility = $('#ddlUtility').val();

            $scope.dtColumns = [
                DTColumnBuilder.newColumn(null, '').renderWith(function (data, type, full) {
                    return '<input type="checkbox" class="check" data-object-id="' + full.objectid + '">'
                }),
                DTColumnBuilder.newColumn("MAINTENANCEZONENAME", "MAINTENANCEZONENAME"),
                DTColumnBuilder.newColumn("MAINTENANCEZONECODE", "MAINTENANCEZONECODE")
            ]
            $scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', {
                url: AppConfig.PrefixURL + "/App/GetMPFilter",
                type: "POST",
                data: JSON.stringify({ strZone: strZone, strUtility: strUtility }),
            })
            .withPaginationType('full_numbers')
            .withDisplayLength(10);
        }        
}])

我希望它能在上述按钮单击上起作用。请帮助

3 个答案:

答案 0 :(得分:1)

您无法获取过滤器值,因为过滤器按钮在控制器外部,并且如果您使用的是datatable,则还需要在{{中添加dt-optiondt-columnsdt-instance 1}}作为属性。

您确实喜欢这种方式

<table>

也注入控制器。

<div ng-app="grdContrl" ng-controller="dtAssignVendor"> <!-- COMMON ANCESTOR-->
  <button class="btn btn-default customBtn" ng-click="GetFilter();">
    <i class="fa fa-filter" aria-hidden="true"></i> Filter
  </button>
  <div class="flTable" id="dtAssignVendor">
     <table id="assignVender" class="mp myTable table table-striped table-bordered" cellspacing="0" width="100%" datatable="" dt-options="dtOptions" dt-columns="dtColumns"  dt-instance="dtInstanceNonInvProduct">                            
     </table>
  </div>
</div>

答案 1 :(得分:0)

据我所知,您尚未将控制器绑定到模板,您需要使用ng-controller指令并将按钮包装在其中(并纠正$scope.getFilter中的拼写错误评论)

<div ng-app="grdContrl" ng-controller="dtAssignVendor"> <!-- COMMON ANCESTOR-->
  <button class="btn btn-default customBtn" ng-click="GetFilter();">
    <i class="fa fa-filter" aria-hidden="true"></i> Filter
  </button>


 ---------------------------
  <div class="flTable" id="dtAssignVendor">
     <table id="assignVender" class="mp myTable table table-striped table-bordered" cellspacing="0" width="100%">                            
     </table>
  </div>
</div>

答案 2 :(得分:0)

您的代码模板应如下所示:

<div ng-app="myApp">
    <div controller="ctrl1">
        <button ng-click="someFunInCtrl1()">Click Me</button>
        ...
    </div>
    <div controller="ctrl2">
        <button ng-click="someFunInCtrl2()">Click Me</button>
        ...
    </div>
</div>

您无法调用GetFilter函数,因为您是从外部控制器作用域调用它的。正如@Karim所说

  

您需要使用ng-controller指令并将按钮包装在其中