I am trying to display a multiple button which fires same function but with different parameters but it's ng-click
function is not working.
Here is my view:
<div class="row" ng-repeat="editPhone in studentDetail ">
<table class="table table-striped m-b-none">
<tbody>
<tr>
<td>Signup Number</td>
<td><input type="text" ng-model="editPhone.phone_no"></td>
<td>
<button class="btn btn-sm btn-success btn-addon" ng-click="testJs(editPhone.studentid,'signup',editPhone.phone_no)">
<i class="fa fa-save"></i>Save
</button>
<i id="signup" class="fa fa-spin fa-spinner hide"></i>
</td>
</tr>
<tr>
<td>Permanent</td>
<td><input type="text" ng-model="editPhone.per_tel"></td>
<td>
<button class="btn btn-sm btn-success btn-addon" ng-click="saveContactNumbers(editPhone.studentid,'permanent',editPhone.per_tel)">
<i class="fa fa-save"></i>Save
</button>
<i id="permanent" class="fa fa-spin fa-spinner hide"></i>
</td>
</tr>
<tr>
<td>Communication</td>
<td><input type="text" ng-model="editPhone.comm_mobileno"></td>
<td>
<button class="btn btn-sm btn-success btn-addon" ng-click="saveContactNumbers(editPhone.studentid,'communication',editPhone.comm_mobileno)">
<i class="fa fa-save"></i>Save
</button>
<i id="communication" class="fa fa-spin fa-spinner hide"></i>
</td>
</tr>
<tr>
<td>Prefered</td>
<td><input type="text" ng-model="editPhone.phone_preffered"></td>
<td>
<button class="btn btn-sm btn-success btn-addon" ng-click="saveContactNumbers(editPhone.studentid,'preferred',editPhone.phone_preffered)">
<i class="fa fa-save"></i>Save
</button>
<i id="preferred" class="fa fa-spin fa-spinner hide"></i>
</td>
</tr>
</tbody>
</table>
</div>
All my data bound with studentDetail
are displaying correctly. That means Angular is running well.
Why then is ng-click
not firing a function?
Here is my function:
$scope.saveContactNumbers=function(studentid,typeChange,updatedNumber){
console.log('saveContactNumbers');
}
This is my full HTML and JS CONTROLLER CODE
Modified:: In my whole code I am unable to fire any controller's function on ng-click
.
SOLUTION:: IT WAS TOTALLY MY FAULT. Mistakenly I HAD DEFINED MY FUNCTION BEFORE SOME OTHER FUNCTION ENDS.
ng-repeat
creates a new scope. You have to reference your save method differently:
<body ng-controller="MyPageCtrl as pageCtrl">
<div class="row" ng-repeat="editPhone in studentDetail ">
<button class="btn btn-sm btn-success btn-addon" ng-click="pageCtrl.saveContactNumbers(editPhone.studentid,'permanent',editPhone.per_tel)"></button>
<div>
</body>
Controller:
(function () {
'use strict';
angular
.module('app')
.controller('MyPageCtrl', MyPageCtrl);
MyPageCtrl.$inject = ['$window'];
function MyPageCtrl($window) {
/* jshint validthis:true */
var vm = this;
vm.saveContactNumbers = function (studentId, type, telephone) {
//save student details
}
}
})();
请以字符串形式传递参数
<button class="btn btn-sm btn-success btn-addon" ng-click="saveContactNumbers('editPhone.studentid','permanent','editPhone.per_tel')">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.