【问题标题】:`ng-click` not working inside `ng-repeat``ng-click` 在 `ng-repeat` 中不起作用
【发布时间】:2018-07-27 12:24:57
【问题描述】:

我试图显示一个触发相同功能但参数不同但它的ng-click 功能不起作用的多个按钮。

这是我的看法:

<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>

我与studentDetail 绑定的所有数据都正确显示。这意味着 Angular 运行良好。

那么为什么ng-click 没有触发函数?

这是我的功能:

$scope.saveContactNumbers=function(studentid,typeChange,updatedNumber){
    console.log('saveContactNumbers');
}

This 是我的完整 HTML 和 JS 控制器代码

修改:: 在我的整个代码中,我无法在 ng-click 上触发任何控制器的功能。

解决方案::这完全是我的错。我错误地在其他一些功能结束之前定义了我的功能。

【问题讨论】:

  • 您的代码中没有任何可见的错误。
  • 是的,我相信相同,但我的 ng-if ,ng-click 仍然无法在其编码的地方工作
  • 看起来你的标记是正确的(jsfiddle.net/1qtxje0c/1),显示你的控制器代码
  • 再次检查您是否正确添加了 ng-app 和 ng-controller..
  • 这是我的小提琴,我粘贴了控制器供您参考jsfiddle.net/anujay0402/st1yxbke/6

标签: javascript angularjs angularjs-ng-repeat angularjs-ng-click


【解决方案1】:

ng-repeat 创建一个新范围。您必须以不同的方式引用您的保存方法:

 <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>

控制器:

   (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
        }
    }
})();

【讨论】:

  • 它仍然无法正常工作,我再次用我更新的代码更新我的问题。
  • 没有错误,如果我用任何未定义的函数名替换我的 saveContactNumbers 函数,我什至不会收到任何错误
【解决方案2】:

请以字符串形式传递参数

<button class="btn btn-sm btn-success btn-addon" ng-click="saveContactNumbers('editPhone.studentid','permanent','editPhone.per_tel')">

【讨论】:

  • 不工作,现在我相信我正在做一个小错误,我正在分享我的代码
最近更新 更多