使用angular.js從Web端點獲取數據

我需要使用angular才能從Web端點獲取數據來填充此表。我有一個使用隨機名稱創建的列表，但我需要它來填充鏈接中的數據。我仍然需要創建社交媒體鏈接。無論哪種方式，有人可以告訴我如何做到這一點，牢記我對角度知之甚少。謝謝。使用angular.js從Web端點獲取數據

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Angular JS </title> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
    <script type="text/javascript" src="folder/main.js"></script> 
    <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" type="text/css" href="css/main.css"> 
</head> 
<body ng-app="MyForm"> 
    <div ng-controller="myCtrl"> 
    <h3>List students</h3> 
    <div class="container-fluid"> 
     <pre>Click header link to sort, input into filter text to filter</pre> 
     <hr /> 
     <table class="table table-striped"> 
     <thead> 
      <tr> 
      <th>Edit</th> 
      <th> 
       <a href="" ng-click="order('name')">ID</a> 
      </th> 
      <th><a href="" ng-click="order('age')"> Name</a> </th> 
      <th><a href="" ng-click="order('gender')">Social Media</a> </th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
      <td>Filter =>></td> 
      <td> <input type="text" ng-model="search.name" /></td> 
      <td> <input type="text" ng-model="search.age" /> </td> 
      <td><input type="text" ng-model="search.gender" /> </td> 
      </tr> 
      <tr ng-repeat="user in students | orderBy:predicate:reverse | filter:paginate| filter:search" ng-class-odd="'odd'"> 
      <td> 
       <button class="btn"> 
       Edit 
       </button> 
      </td> 
      <td>{{ user.name}}</td> 
      <td>{{ user.age}}</td> 
      <td>{{ user.gender}}</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>

JS：

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

的數據是這樣的：

{"id":"11","name":"A Cooperativa","full_address":"Rua Bar\u00e3o de Viamonte 5, 2400-262 Leiria","location":"Leiria","council":"Leiria","country":"Portugal","lat":"39.7523042","lng":"-8.7825576","type":"various","facebook":"https:\/\/www.facebook.com\/pages\/A-Cooperativa-MerceariaTasca\/1559630810945570","facebook_id":"","gmaps":"https:\/\/www.google.pt\/maps\/place\/R.+Bar%C3%A3o+de+Viamonte+5,+2410+Leiria\/@39.7523042,-8.7825576,17z\/data=!3m1!4b1!4m2!3m1!1s0xd2273a29462db11:0x49a3f9a45cd9eb80","tripadvisor":"http:\/\/www.tripadvisor.com\/Restaurant_Review-g230085-d8154189-Reviews-A_Cooperativa-Leiria_Leiria_District_Central_Portugal.html","zomato":"","website":"","email":"[email protected]","telephone":"912635324","active":"1","updated":"2015-08-17 09:01:05"}

來源

2016-09-25 Ricardo Pimenta

請檢查您是否正確連接腳本 – Ladmerc

我不知道如果我沒有得到這個權利，但：你想讓學生從網絡端點作爲json？

然後你會寫這樣的事情在角：

app.controller('myCtrl', function ($scope, $http) { 
    ... 
    $scope.students = []; 
    $scope.totalItems = 0; 

    $http.get('https://www.domain.com/api/resource') 
     .then(function success(response) { 
      $scope.students = response.data; 
      $scope.totalItems = $scope.students.length; 
     }, function failed(reason) {console.log(reason);}) 
    ... 
});

但是，你應該使用分隔的文件，服務等

來源

2016-09-25 16:58:43

使用angular.js從Web端點獲取數據

回答

相關問題