简体   繁体   中英

`ng-click` not working inside `ng-repeat`

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM