使用AngularJS合并来自WP-API的结果

时间：2016-01-15 作者：Lucy Brown

我目前拥有此网站-http://dev.5874.co.uk/scd-data/ 这里有一个下拉列表，显示我通过AngularJS拉入的WP-API的结果。

它当前将两组结果组合在一起，因为它们是单独的URL，结果是在自定义帖子类型中的类别中，因此如果两篇帖子都在所选的同一类别中“标记”，则会显示两次。我需要一种方法来组合两组结果，但只显示其中一个帖子-我希望这是有意义的。我对API数据和AngularJS非常陌生，我想有一种更简单的方法可以做到这一点。任何帮助都将不胜感激。下面是我的代码片段，以显示它当前的工作方式。

提前感谢！

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

<style>

    .desc {display: none;}

</style>

<script type="text/javascript">
                    $(function(){
                              $(\'.selectOption\').change(function(){
                                var selected = $(this).find(\':selected\').text();
                                //alert(selected);
                                $(".desc").hide();
                                 $(\'#\' + selected).show();
                              }).change()
                    });
</script>


<script>

    var app = angular.module(\'myApp\', []);

    app.controller(\'northWestCtrl\', function($scope, $http) {
      var url = \'http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=northwest\';
      $http.get(url).then(function(data) {
        $scope.data = data.data;
      });
    });
</script>


         <select class="selectOption">
                        <option>Search by Region</option>
                        <option>NorthWest</option>
                        <option>NorthEast</option>
                        <option>Midlands</option>
                        <option>EastAnglia</option>
                        <option>SouthEast</option>
                        <option>SouthWest</option>
                        <option>Scotland</option>
                        <option>Wales</option>
                        <option>NorthernIreland</option>
                        <option>ChannelIslands</option>
       </select>


<div id="changingArea">


    <body ng-app="myApp">
                <div id="NorthWest" class="desc">

                <div  ng-controller="northWestCtrl">
                  <div ng-repeat="d in data">
                    <h2 class="entry-title title-post">{{d.title}}</h2>
                    <img src="{{d.acf.logo}}">
                    <div id="listing-contact">Contact: {{d.acf.contact}}, {{d.acf.position}}</div>
                    <div id="listing-address-1">
                      {{d.acf.address_1}}, {{d.acf.address_2}} {{d.acf.address_3}} {{d.acf.town}} {{d.acf.county}} {{d.acf.postcode}}
                    </div>
                    <div id="listing-phone">Telephone: {{d.acf.telephone}}</div>
                    <div id="listing-mobile">Mobile: {{d.acf.mobile}}</div>
                    <div id="listing-email">Email: {{d.acf.email}}</div>
                    <div id="listing-website">Website: <a href="{{d.acf.website}}">{{d.acf.website}}</a></div>
                    <div id="listing-established">Established: {{d.acf.established}}</div>
                    <div id="listing-about">About: {{d.acf.about}}</div>
                    <div id="listing-mailingaddress">Mailing Address: {{d.acf.mailing_address_}}, {{d.acf.mailing_address_2}}, {{d.acf.mailing_address_3}}, {{d.acf.mailing_town}}, {{d.acf.mailing_county}}, {{d.acf.mailing_postcode}}</div>
                    <div id="listing-directions">Directions: {{d.acf.directions}}</div>
                    <div id="scd-link"><a href="{{d.link}}">View on The Shooting Club Directory</a></div>
                  </div>
                </div>
              </div>
</body>
</div>

1 个回复
SO网友:ccprog

我假设您发布的html是一个模板，它是主题或插件的一部分，您可以在其中与页面加载例程进行交互。

您不需要加载jQuery，它已经由WordPress加载。相反，您应该利用脚本加载系统。wp\\u enqueue\\u脚本中的第三个参数表示依赖关系：我的应用程序需要加载angular，angular需要加载jQuery。

<?php
add_action( \'get_header\', \'add_to_header\');

function add_to_header () {
    add_action( \'wp_enqueue_scripts\', \'add_my_scripts\');
}

function add_my_scripts () {
    wp_enqueue_script(\'angular\', \'https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js\', array( \'jquery\' ));
    // you could load your angular app script here from a separate file, like:
    wp_enqueue_script(\'my-app\', \'path/to/my-app.js\', array( \'angular\' ));
}
?>
通过查看您的页面，我看不出您需要多个控制器或多个区域列表区域的原因。关闭样式和jQuery脚本，将您的选择放置在控制器范围内，并为每个选项设置一个值：

<select ng-model="region" ng-change="load(region)">
    <option value="northwest">NorthWest</option>
    ...
</select>
然后，您的控制器应具有仅在需要时加载区域数据的功能：

var url = \'http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=\';
$scope.data_ready = false;
$scope.load = function (region) {
    $http.get(url + region).then(function(data) {
    $scope.data = data.data;
    $scope.data_ready = true;
});
data\\u ready变量将隐藏或显示您的列表区域：

<div ng-show="data_ready">
   <div ng-repeat="d in data">
       ...
随着加载的数据发生变化，列表区域的内容也会发生变化。

标签： javascript   wp-api   小码农  

相关推荐

如何在函数中添加自定义的JavaScript？

我想写一些JavaScript，并想将其分配给一个自定义功能，我探索了很多，但不幸的是，它们都不起作用，任何帮助都将受到欢迎。我的代码如下：add_action(\'init\', function() { if (current_user_can(\'disable_image\')) { //add javascript here } });