단추 누르기 이벤트 ng-click하지만 ng-repeat가로드되지 않을 때 ajax를 호출합니다.

Question

ajax 단추를 클릭하고 ng-repeat가 한 번의 클릭으로 데이터를로드하지는 않지만 두 번 클릭 한로드를 클릭하면 ijax가 호출하지 않습니다. 이유 코드를 확인하십시오 알고

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

여기를 클릭

Answer 1

$.ajax는 jQuery의 일부입니다,하지만 Angular의. 그래서 당신의 아약스 요청에서 반환, 각도 컨텍스트 귀하의 데이터 변경 인식하지 못합니다. 다시 클릭하면 다이제스트주기가 강제로 실행되고 바로 그 순간에 배열에서 새로운 데이터가 감지되므로 다시 렌더링 된 것을 볼 수 있습니다.

두 가지 옵션이 있습니다.

1- 성공 콜백에서 $scope.$apply()을 (를) 사용하십시오.

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

2 대신 각도에서 $http 서비스를 사용처럼 - 그것은 내가 옵션 갈 것이다 당신

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

처럼 내부적으로 $scope.$apply()를 호출 서비스에 내장되어 두

Answer 2

진짜 문제는 당신이 사용하고 있다는 것입니다 jQuery의 ajax 대신 각도의 $http. Angular를 통해 그런 일을하지 않으면 Angular의 범위를 넘어서 일하고 있으며 변경 사항을 알지 못합니다.

당신은 시도 할 수 있습니다 :

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