我在按钮点击事件ng-click时调用ajax但是ng-repeat没有加载

时间:2017-03-14 21:04:58

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

我被称为ajax按钮点击和ng-repeat没有加载数据一次点击但是当我点击它的两倍负载时,我不知道为什么请检查代码

 $scope.myData.doClick = function (item,event) {                             
                          var startdate = document.getElementById('txtstart').value;
                          var enddate = document.getElementById('txtend').value;
                          $.ajax({
                              type: "POST",
                              url: "studentattendance.aspx/GetEmployees",
                              data: JSON.stringify({ title: startdate, songname: enddate}),
                              contentType: "application/json; charset=utf-8",
                              dataType: "json",
                              success: function (msg) {
                                  $scope.studentattendance = {};
                                      $scope.studentattendance = JSON.parse(msg.d);
                                  console.log($scope.studentattendance);

                              },
                              error: function (msg) {
                                  alert(msg.d);
                              }
                          });
                      }

// HTML

<tr ng-repeat="info in studentattendance">
                                            <td>{{info.student_name}}</td>
                                            <td>{{info.father_name}}</td>
                                            <td>{{info.class_name}}</td>
                                            <td>{{info.attendancedate | date:'dd-MM-yyyy'}}</td>
                                            <td ng-if="info.attendanceType == 'Present'"> <button type="button" class="btn btn-success btn-circle"><i class="fa fa-check"></i></td>
                                             <td ng-if="info.attendanceType == 'Absent'"> <button type="button" class="btn btn-danger btn-circle"><i class="fa fa-times"></i></td>
                                             <td ng-if="info.attendanceType == 'Leave'"> <button type="button" class="btn btn-warning btn-circle"><i class="fa fa-list"></i></td>


                                        </tr>

点击此处

2 个答案:

答案 0 :(得分:1)

$.ajaxjQuery的一部分,但不是Angular的一部分。因此,当它从您的ajax请求返回时,角度上下文不会意识到您的数据发生了变化。当你再次点击时,一个摘要周期被强制运行,在那个时刻你的数组中会检测到新的数据 - 这就是你再次看到它的原因。

您有两种选择。

1-在成功回调中使用$scope.$apply()

喜欢

success: function (msg) {
             $scope.studentattendance = {};
              $scope.studentattendance = JSON.parse(msg.d);
              console.log($scope.studentattendance);
             $scope.$apply();
}

2-从角度使用$http服务 - 它是一个内置服务,在内部为您调用$scope.$apply()

喜欢

$http({
      method: "POST",
      url: "studentattendance.aspx/GetEmployees",
      dataType: 'json'
      data: JSON.stringify({ title: startdate, songname: enddate}),
      headers: { "Content-Type": "application/json; charset=utf-8" },
  }).then(function (msg) {
      $scope.studentattendance = {};
      $scope.studentattendance = JSON.parse(msg.d);
      console.log($scope.studentattendance);
      }, function (msg) {
     alert(msg.d);
  });

我会去选项二

答案 1 :(得分:0)

真正的问题是你使用jQuery的$Ttype而不是Angular的ajax。当你不通过Angular做这样的事情时,你在Angular的范围之外工作,而且它不知道变化。

您可以尝试:

$http