AngularJS ng-repeat가 테이블 데이터를 표시하지 않습니다

Question

컨트롤러가 스프링 응용 프로그램 데이터에서 데이터를 가져 왔지만 형식으로 표시되지 않습니다. 데이터에 상수를 넣으면 완벽하게 작동합니다. 여기

고정 데이터와 동일한 코드가수록 문제가 될 수 무엇

sampleApp.controller('searchCourseController', ['$scope', '$http', 
     function($scope, $http, $routeParams, ngTableParams) { 
     $scope.courses = {};    

     $scope.searchButton=function() { 
      var actionUrl = 'searchCourse'; 

      var textToSearch = $("#txtTitle").val(); 
      if (textToSearch.length == 0) { 
       alert("Please provide search criteria. Blank search is not allowed"); 
       /* $("#loader-overlay").fadeOut(); 
       $("#bg-loader").fadeOut(); */ 
       return; 
      } 

      $http.get(actionUrl+"?title="+escape(textToSearch)) 
      .success(
       function(data, status, headers, config) { 
        $scope.courses = data; 
        console.log($scope.courses); 
       }) 
      .error(
       function(data, status, headers, config) { 
       }); 
     }; 

     $scope.editCourseButton=function() { 
      alert ("edit"); 
     }; 

    }]); 

내가 데이터를 표시하는 ussing하고 내 HTML을

<table class="table"> 
           <thead> 
            <tr> 
             <th>Course Name</th> 
             <th>Status</th> 
             <th class="hidden-xs">Publishing status</th> 
             <th class="hidden-xs">Group Name</th> 
             <th class="hidden-xs">Rating</th> 
            </tr> 
           </thead> 
           <tbody> 
            <tr ng-repeat="course in $scope.courses"> 
             <td>{{course.name}}</td> 
             <td>{{course.courseStatus}}</td> 
             <td>{{course.coursePublishStatus}}</td> 
             <td>{{course.courseGroupName}}</td> 
             <td>{{course.courseRating}}</td> 
            </tr> 
           </tbody> 
          </table> 

따르고 JS 컨트롤러에 내 코드입니다 데이터 표에 문제없이 표시됩니다.

<tr ng-repeat="course in $scope.courses"> 

이

<tr ng-repeat="course in courses"> 

Answer 1

덕분에, ng-repeat 안에서 scope.courses를 사용하면 $ http.get 성공 콜백 내에서 $ scope. $ apply()를 사용하여 범위를 업데이트 할 수 있습니다. 이것은 비동기 프로세스 후에 뷰를 업데이트 된 $ scope.courses 바인딩으로 업데이트합니다.

예 :

<input class="form-control" type="text" placeholder="Title" id="txtTitle" ng-change="search()" ng-model="txtToSearch"> 

NG 다음과 같이 변화에

$http.get(actionUrl+"?title="+escape(textToSearch)) 
.success(function(data, status, headers, config) { 
       $scope.courses = data; 

       $scope.$apply(); // used $scope.$apply() to update the scope. 
       console.log($scope.courses); 
      }) 
     .error(
      function(data, status, headers, config) { 
      }); 
    }); 

Answer 2

어울린다뿐만 아니라 $에서 $ 범위를 생략 : 당신은이 정의되지 이후, 뷰에서 $ 범위를 지정할 수 없습니다

Answer 3

호출 검색 기능은이 문제를 해결했다. 하지만 여전히 검색 버튼으로 작동하지 않는 이유를 찾으려고합니다. 변경 검색 컨트롤러뿐만 아니라 여기에 코드

입니다

function SearchCtrl($scope, $http, $location, CS) { 
$scope.search = function() { 
    $scope.result = null; 
    $http({method: 'GET', url: '/search?title=' + $scope.txtToSearch }). 
     success(function(data, status, headers, config) { 
      $scope.results = data; 
     }). 
     error(function(data, status, headers, config) { 
      $scope.status = status; 
     });  
}; 

$scope.edit=function(c) 
{ 
    CourseService.set(course); 
    $location.path('/edit'); 
} 



}