个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-29 15:31:06 26 4
gpt4 key购买 nike

我目前有这个网站 - 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>

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

最佳答案

Angular 是一个很棒的 JavaScript 前端框架可供选择，您有了一个良好的开端，但还可以进行很多更改。我在下面进行了一些建议的更改，以便更轻松地执行操作。

See this CodePen for all changes.

看起来你已经掌握了 ng-repeat 的思想，但是你的 View 和 Controller 中肯定有很多重复的 HTML 和 JS，所以让我们看看我们是否可以做得更好。

  1. 让我们在不使用 jQuery 的情况下进行尝试，以避免直接操作 DOM。我们可以用一个 Controller 来代替许多 Controller 。

    <div ng-app="MyApp">
        <div ng-controller="MyController">
        ...
        </div>
    </div>
    <script type="text/javascript">
        var app = angular.module('MyApp', []);
        app.controller('MyController', ...);
    </script>

  2. 对于下拉列表，我们将在我们的 View 中使用 ng-repeat 并显示来 self 们模型的射击类型的名称

    ...
    <select ng-model="selectedListing">
        <option
            ng-repeat="listingShootingType in listingShootingTypes"
            value="{{listingShootingType.name}}">
            {{listingShootingType.name}}
        </option>
    </select>
    ...
    <script type="text/javascript">
        ...
        // Our selections/filters
        $scope.listingShootingTypes = [
            'All',
            'Air Rifle/Air Pistol',
            'Clay',
            'ABT',
            'Double Trap',
            'English Skeet',
            'English Sporting',
            'Fitasc',
            'Olympic Skeet',
            'Olympic Trap',
            'Simulated Game',
            'Sport Trap/Compact',
            'Universal Trench',
            'ZZ/Helice',
            'Rifle',
            'Centrefire Target Rifle',
            'Gallery Rifle',
            'Muzzle Loading',
            'Practice Shotgun',
            'Smallbore Rifle'
        ];
        ...
    </script>

  3. 只有一个 Controller ，我们仍然可以对每个列表使用 ng-repeat。

    <div ng-repeat="d in data">
        <h2 class="entry-title title-post">{{d.title}}</h2>
        <div id="listing-image"><img src="{{d.acf.logo}}"></div>
        <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>

  4. 最后...我们如何只显示与我们从下拉列表中选择的拍摄类型相匹配的列表？我们可以使用自定义 Angular 过滤器!

    ...
    <div ng-repeat="d in data | filter:isSelectedListing">
    ...
    <script type="text/javascript">
        ...
        // Let's define a custom Angular filter because the WordPress JSON is complex
        $scope.isSelectedListing = function(listing) {
            // Show nothing if nothing is selected
            if (angular.isUndefined($scope.selectedListing) || $scope.selectedListing == '') {
                return false;
            }

            // Show all if 'All' is selected
            if ($scope.selectedListing == 'All') {
                return true;
            }

            // If the shooting type we're looking for is present, show the listing.
            // To do this, we parse the WordPress JSON object model.
            if (angular.isDefined(listing.terms.listing_shooting_type)) {
                for (var i = 0; i < listing.terms.listing_shooting_type.length; i++) {
                    if (listing.terms.listing_shooting_type[i].name == $scope.selectedListing) {
                        return true;
                    }
                }
            }
            return false;
        };
        ...
    </script>

希望这能让您了解我们如何更好地利用 ng-repeat + DRY :)

The entire CodePen is here.

关于javascript - 使用 AngularJS 合并来自 WP-API 的结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34809321/

26 4 0
文章推荐： android - 构建像纽约时报应用程序一样的 Android 状态栏
文章推荐： mysql - 错误 1242 (21000) : Subquery returns more than 1 row?
文章推荐： mysql - 如何将图像上传到mysql数据库并在pug模板引擎中显示来自mysql数据库的图像？
文章推荐： Android View 滚动性能故障排除
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com