рендеринг таблицы с использованием $ http угловой

что я делаю неправильно здесь? Я пытаюсь сделать таблицу с использованием угловых, но таблица показывает пустую, с {{ place.id}}, {{ place.name}} и {{ place.social}}, где должны быть данные.

<head> 
    <title>Angular JS </title> 

    <script src="http://code.angularjs.org/1.4.8/angular.js"></script> 
    <script src="http://code.angularjs.org/1.4.8/angular-resource.js"></script> 
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="css/main.css"> 

    <script> 
     var app = angular.module('MyForm', ['ui.bootstrap', 'ngResource']); 
     app.controller('myCtrl', function ($scope, $http) { 
     $http.get('http://passarola.pt/api/places').success(function(data) { 
     $scope.predicate = 'id'; 
     $scope.reverse = true; 
     $scope.currentPage = 1; 
     }; 

     $scope.order = function (predicate) { 
     $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false; 
     $scope.predicate = predicate; 
     }; 

    $scope.totalItems = $scope.places.length; 
    $scope.numPerPage = 5; 
    $scope.paginate = function (value) { 
     var begin, end, index; 
     begin = ($scope.currentPage - 1) * $scope.numPerPage; 
     end = begin + $scope.numPerPage; 
     index = $scope.places.indexOf(value); 
     return (begin <= index && index < end); 
    }; 
    }); 
    </script> 

</head> 

<body ng-app="MyForm"> 
    <div ng-controller="myCtrl"> 
    <div class="container-fluid"> 
     <pre>Passarola Beer</pre> 
     <hr /> 
     <table class="table table-striped"> 
     <thead> 
      <tr> 
      <th class="media_gone"> 
       <a href="" ng-click="order('id')">ID</a> 
      </th> 
      <th><a href="" ng-click="order('name')"> Name</a> </th> 
      <th><a href="" ng-click="order('social')">Social Media</a> </th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr>  
      <td class="media_gone2"> <input type="text" ng-model="search.id" /></td> 
      <td> <input type="text" ng-model="search.name" /> </td>  
      </tr> 
      <tr ng-repeat="place in places | orderBy:predicate:reverse | filter:paginate| filter:search" ng-class-odd="'odd'">  
      <td>{{ place.id}}</td> 
      <td>{{ place.name}}</td> 
      <td class="gender_gone">{{ place.social}}</td> 
      </tr> 
     </tbody> 
     </table> 
     <pagination total-items="totalItems" ng-model="currentPage" 
      max-size="5" boundary-links="true" 
      items-per-page="numPerPage" class="pagination-sm"> 
     </pagination> 
    </div> 
    </div> 
</body> 
</html>

Пример кода:

var app = angular.module('MyForm', ['ui.bootstrap', 'ngResource']); 
    app.controller('myCtrl', function ($scope, $timeout) { 
    $scope.predicate = 'id'; 
    $scope.reverse = true; 
    $scope.currentPage = 1; 
    $scope.order = function (predicate) { 
     $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false; 
     $scope.predicate = predicate; 
    }; 
    $scope.places = [ 
     { id: 'Kevin', name: 25, social: 'boy' }, 
     { id: 'John', name: 30, social: 'girl' }, 
     { id: 'Laura', name: 28, social: 'girl' }, 
     { id: 'Joy', name: 15, social: 'girl' }, 
     { id: 'Mary', name: 28, social: 'girl' }, 
     { id: 'Peter', name: 95, social: 'boy' }, 
     { id: 'Bob', name: 50, social: 'boy' }, 
     { id: 'Erika', name: 27, social: 'girl' }, 
     { id: 'Patrick', name: 40, social: 'boy' }, 
     { id: 'Tery', name: 60, social: 'girl' } 
    ]; 
    $scope.totalItems = $scope.places.length; 
    $scope.numPerPage = 5; 
    $scope.paginate = function (value) { 
     var begin, end, index; 
     begin = ($scope.currentPage - 1) * $scope.numPerPage; 
     end = begin + $scope.numPerPage; 
     index = $scope.places.indexOf(value); 
     return (begin <= index && index < end); 
    };

источник

2016-09-25 Ricardo Pimenta

Проверьте наличие ошибок в консоли браузера. всякий раз, когда вы видите исходные выражения с '{{}}', а не просто пустое пространство или ваши данные, это свидетельствует о том, что по какой-то причине угловой не удалось загрузить. – Claies

@Claies говорит 'SyntaxError: missing) после списка аргументов' и' Ошибка: [$ injector: modulerr] Не удалось создать экземпляр модуля MyForm из-за: [$ injector: nomod] Модуль 'MyForm' недоступен! ' –

OK , Я решил эту часть, но теперь она говорит: «Ошибка: $ scope.places не определена», и я не знаю, что делать –

Используйте этот контроллер код.

app.controller('myCtrl', function ($scope, $http) { 
    $scope.places = []; 
    $http.get('http://passarola.pt/api/places').success(function(data) { 
     $scope.places = data.data; 
     $scope.totalItems = $scope.places.length; 
     $scope.predicate = 'id'; 
     $scope.reverse = true; 
     $scope.currentPage = 1; 
    }; 

    $scope.order = function (predicate) { 
    $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false; 
    $scope.predicate = predicate; 
    };  
$scope.numPerPage = 5; 
$scope.paginate = function (value) { 
    var begin, end, index; 
    begin = ($scope.currentPage - 1) * $scope.numPerPage; 
    end = begin + $scope.numPerPage; 
    index = $scope.places.indexOf(value); 
    return (begin <= index && index < end); 
}; 
});

источник

2016-09-25 22:58:47

Большое спасибо, это сработало! –

только для целей познания. Может ли вы, ребята, опубликовать рабочую демонстрацию этого кода? Благодаря ! –

рендеринг таблицы с использованием $ http угловой

ответ

Смежные вопросы