[英]Call an AngularJS function on button click is not working
I have a requirement where I want to call an angularJS
function on button click. 我有一个要求,我想在单击按钮时调用
angularJS
函数。 So I tried like below 所以我尝试如下
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);
}
}])
<button class="btn btn-default customBtn" ng-click="GetFilter();">
<i class="fa fa-filter" aria-hidden="true"></i>
Filter
</button>
---------------------------
<div ng-app="grdContrl">
<div class="flTable" id="dtAssignVendor">
<table id="assignVender" class="mp myTable table table-striped table-bordered" cellspacing="0" width="100%">
</table>
</div>
</div>
I want this to work on the above mentioned button click. 我希望它能在上述按钮单击上起作用。 Please help
请帮忙
You can not get filter values, because filter button is outside of controller and if you are using datatable
then also add dt-option
, dt-columns
and dt-instance
into <table>
as attributes. 你不能得到过滤器值,因为过滤器按钮控制器之外,如果你正在使用
datatable
,然后还加dt-option
, dt-columns
和dt-instance
为<table>
的属性。
You have do like this way 你喜欢这样
<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>
Also inject into controller. 同时注入控制器。
app2.controller('dtAssignVendor',function ($scope, $http, DTOptionsBuilder, DTColumnBuilder,DTInstances) {
$scope.GetFiler = function () {
//get input values into scope instead of javascript variable
//var strZone = $('#SAPExecutive_R4GState').val();
//var strUtility = $('#ddlUtility').val();
$scope.strZone = $scope.SAPExecutive_R4GState;
$scope.strUtility = $scope.ddlUtility;
//redraw table on button click
$scope.dtInstanceNonInvProduct.DataTable.draw();
}
$scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', {
url: AppConfig.PrefixURL + "/App/GetMPFilter",
type: "POST",
data: JSON.stringify({ strZone: $scope.strZone, strUtility: $scope.strUtility }),
})
.withPaginationType('full_numbers')
.withDisplayLength(10);
$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.dtInstanceNonInvProduct = {};
})
As far as i see you did not bind the controller to your template, you need to use the ng-controller
directive and wrap the button inside it (and correct the spelling error on $scope.getFilter
as raised in the comments) 据我所知,您没有将控制器绑定到模板,您需要使用
ng-controller
指令并将按钮包装在其中(并纠正$scope.getFilter
中提到的$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>
The template of your code should be something like this: 您的代码模板应如下所示:
<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>
You are unable to call GetFilter
function because you are calling it from outside controller scope. 您无法调用
GetFilter
函数,因为您是在外部控制器作用域内调用它。 As @Karim said 正如@Karim所说
you need to use the ng-controller directive and wrap the button inside it
您需要使用ng-controller指令并将按钮包装在其中
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.