AngularJS : jsonplaceholder.typicode.com을 데이터 소스로 사용하면 작동하지 않습니다.

Question

AngularJS에 처음 왔으므로이 작은 것으로 만졌습니다. 사용자 응용 프로그램입니다.

var root = 'https://jsonplaceholder.typicode.com'; 
 

 
// Create an Angular module named "usersApp" 
 
var app = angular.module("usersApp", []); 
 

 
// Create controller for the "usersApp" module 
 

 
app.controller("usersCtrl", ["$scope", function($scope) { 
 

 
    $scope.users = root + "/users"; 
 

 
}]);

.search-box { 
 
    margin: 5px; 
 
} 
 

 
.table-container .panel-body { 
 
    padding: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="container" data-ng-app="usersApp"> 
 
    <div class="panel panel-default table-container"> 
 
    <div class="panel-heading">Users</div> 
 
    <div class="panel-body" data-ng-controller="usersCtrl"> 
 
     <div class="row"> 
 
     <div class="col-sm-12"> 
 
      <div class="form-group search-box"> 
 
      <input type="text" class="form-control" id="search" placeholder="Search User" data-ng-model="search"> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-12"> 
 
      <table class="table table-striped table-bordered" id="dataTable"> 
 
      <thead> 
 
       <tr> 
 
       <th>Full name</th> 
 
       <th>Email</th> 
 
       <th>City</th> 
 
       <th>Street</th> 
 
       <th>Suite</th> 
 
       <th>Zipcode</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr data-ng-repeat="user in users|filter:search"> 
 
       <td>{{user.name}}</td> 
 
       <td><a href="mailto:{{user.email}}">{{user.email}}</a></td> 
 
       <td>{{user.address.city}}</td> 
 
       <td>{{user.address.street}}</td> 
 
       <td>{{user.address.suite}}</td> 
 
       <td>{{user.address.zipcode}}</td> 
 
       </tr> 
 
      </tbody> 
 
      </table> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>

: - 이미 HERE (jsFiddle)를 수행 한 것처럼, 성공적으로 - 나는 데이터 소스로 jsonplaceholder.typicode.com를 사용하려면 대신 컨트롤러 내부 데이터의 사용자 배열을 작성

하지만 작동하지 않습니다. 웬일인지 이해할 수 없습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까? 고맙습니다!

업데이트 : 작동 바이올 HERE.

Answer 1

var root = 'https://jsonplaceholder.typicode.com' 
    $scope.users = root + "/users"; 

여기에 데이터를 검색하기위한 http 요청이 없습니다. 다음 범위의 사용자 변수가 작동하지 않습니다이

var root = 'https://jsonplaceholder.typicode.com'; 

// Create an Angular module named "usersApp" 
var app = angular.module("usersApp", []); 

// Create controller for the "usersApp" module 

app.controller("usersCtrl", ["$scope","$http", function($scope,$http) { 
    var url = root + "/users" 
    // $http is a service in angular which is used to make REST calls 
    // we call the url and get the data , which is resolved as a promise 
    $http.get(url) 
.then(function(data){ 
// after the data is resolved we set it in the scope 
    $scope.users = data.data; 
}) 


}]);