0

我有这个 URL 使用 wp-api 在我的网站上工作-

http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=midlands

输出此代码（使用 chrome 插件整齐地显示它） -

在此处输入图像描述

我对此真的很陌生，如果有人能指出如何使用 AngularJS（这是我读过的最好使用的）在可用页面上显示这些数据的正确方向，我将不胜感激。

这是我到目前为止提取数据的代码 -

<script type="text/javascript">
        function goToNewPage()
        {
            var url = document.getElementById('list').value;
            if(url != 'none') {
                window.location = url;
            }
        }
    </script>

    <select name="list" id="list" accesskey="target">
        <option value='none' selected>Choose a region</option>
        <option value="http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=northwest">North West</option>
        <option value="http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=northeast">North East</option>
        <option value="http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=midlands">Midlands</option>
        <option value="http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=eastanglia">East Anglia</option>
        <option value="http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=southeast">South East</option>
        <option value="http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=southwest">South West</option>
        <option value="http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=scotland">Scotland</option>
        <option value="http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=wales">Wales</option>
        <option value="http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=northernireland">Northern Ireland</option>
        <option value="http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=channel">Channel Islands</option>






    <select>

    <input type=button value="Go" onclick="goToNewPage()" />

链接 -http://scd.blaze.wpengine.com/test/

提前感谢您的帮助！

4

1 回答 1

1

好的，您的代码中没有太多 Angular，但这是一个起点：

看法：

<div ng-app="myApp" ng-controller="regionsCtrl">
  <label>Select a region:</label>
  <select ng-options="region for region in regions" ng-model="region" ng-change="getRegionData()">
  </select>
  <table>
    <tr>
      <th>id</th>
      <th>Title</th>
      <th>Status</th>
      <th>Type</th>
    </tr>
    <tr ng-repeat="d in data">
      <td>{{d.ID}}</td>
      <td>{{d.title}}</td>
      <td>{{d.status}}</td>
      <td>{{d.type}}</td>
    </tr>
  </table>
</div>

控制器：

var app = angular.module('myApp', []);
app.controller('regionsCtrl', function($scope, $http) {
  $scope.regions = [
    'North West', 'North East', 'Midlands', 'East Anglia', 'South East', 'South West', 'Scotalnd', 'Wales'
  ]

  $scope.getRegionData = function() {
    var region = $scope.region
    $http.get("http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=#{region}").then(function(data) {
      $scope.data = data; //this is the data that server returns
    })
  }
});

看看这个小提琴

它的作用是使用选择菜单中的区域调用服务器，然后将从服务器返回的数组存储在范围内的变量中（在本例中为数据），然后您可以使用 ng- 在视图中对其进行迭代重复。请记住，由于cors，我无法访问服务器，但如果您拥有正确的凭据，它应该可以工作。

于 2015-12-11T12:32:33.327 回答