Question

我使用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/

提前感谢您的帮助！

Answer 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
    })
  }
});

看看这个fiddle

这样做是使用select菜单中的区域调用服务器，然后将服务器返回的数组存储在作用域的变量中（本例中是数据），然后你可以在视图中迭代它使用ng-repeat。请记住，由于cors，我无法访问服务器，但如果您拥有正确的凭据，则应该可以使用。

如何使用Angular JS和WP-API的结果

1 个答案: