文章/答案/技术大牛

发布

社区首页 >问答首页 >使用AngularJS组合WP-API的结果

问使用AngularJS组合WP-API的结果
EN

Stack Overflow用户

提问于 2016-01-15 10:44:37

回答 1查看 202关注 0票数 3

我现在有这个网站- http://dev.5874.co.uk/scd-data/，在那里我有一个下拉列表，它显示来自WP的结果，我正在通过AngularJS进行操作。

它目前组合了两组结果，因为它们是单独的URL的，结果在自定义post类型中的类别中，所以如果两个帖子在所选的相同类别中被“标记”，它们会显示两次。我需要一个方法来组合这两组结果，但只显示其中一个帖子-我希望这是有意义的。我对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>

下面是一个工作代码pen - http://codepen.io/anon/pen/yePYdq

javascript

angularjs

wordpress

wp-api

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-01-22 05:59:20

changes是一个很好的JavaScript前端框架供您选择，您已经有了一个很好的开端，但是可以做很多更改。为了更容易地完成以下工作，我做了一些建议的修改。

有关所有更改，请参见此CodePen。

看起来您已经掌握了ng-重复的概念，但是在您的视图和控制器中肯定有很多重复的HTML和JS，所以让我们看看是否可以做得更好。

让我们在没有jQuery的情况下尝试这样做，以避免直接操作DOM。而不是许多控制器，我们可以用一个控制器来完成这个任务。
对于下拉列表，我们将在视图中使用ng-重复，并显示模型中的射击类型的名称。 . {{listingShootingType.name}} . //我们的选择/过滤器$scope.listingShootingTypes = 'All'，'Air Rifle/Air Pistol'，'Clay'，'ABT'，'Double Trap'，'English Skeet'，'English Sporting'，'Fitasc'，“奥林匹克短枪”、“奥林匹克陷阱”、“模拟游戏”、“运动陷阱/契约”、“通用海沟”、“ZZ/Helice”、“步枪”、“中火目标步枪”、“画廊步枪”、“枪口装弹”、“练习猎枪”、“小口径步枪”；...
只有一个控制器，我们仍然可以对每个列表使用ng-重复。
终于..。如何仅显示与下拉列表中所选射击类型相匹配的列表？我们可以用一个定制的角度过滤器！ . //让我们定义一个自定义的角度过滤器，因为WordPress JSON是复杂的$scope.isSelectedListing =函数(列表){ //如果没有选择任何东西，如果没有选择如果(angular.isUndefined( $scope.selectedListing )‘s$scope.selectedListing == '') {返回false；} // Show ' all‘被选中if ($scope.selectedListing == 'All') {返回true；} //如果我们正在寻找的拍摄类型存在，则显示列表。//为此，我们解析WordPress JSON对象模型。如果(angular.isDefined(listing.terms.listing_shooting_type)) { for (var i= 0；i< listing.terms.listing_shooting_type.length；i++) { if (listing.terms.listing_shooting_typei.name == $scope.selectedListing) {返回true；}}返回false；}；...

希望这能让您了解我们如何更好地利用ng-重复+ 干的 :)

整个CodePen都在这里。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34809321

复制

相似问题

问使用AngularJS组合WP-API的结果
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用AngularJS组合WP-API的结果EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用AngularJS组合WP-API的结果
EN