javascript - AngularJS を使用して WP-API からの結果を組み合わせる

Question

私は現在、このサイトを持っています - http://dev.5874.co.uk/scd-data/ここには、AngularJS を介してプルしている WP-API からの結果を表示するドロップダウンがあります。

現在、2 つの結果セットは別々の URL であるため、結合されます。結果はカスタム投稿タイプ内のカテゴリにあるため、両方の投稿が選択された同じカテゴリで「タグ付け」されている場合、それらは 2 回表示されます。2 つの結果セットを組み合わせて、投稿の 1 つだけを表示する方法が必要です。これが理にかなっていることを願っています。私は 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

score 1 · Accepted Answer

Angular は最適な JavaScript フロントエンドフレームワークであり、良いスタートを切ることができましたが、多くの変更が加えられる可能性があります。以下のことをより簡単に実行できるように、いくつかの提案された変更を加えました。

すべての変更については、この CodePen を参照してください。

ng-repeat の考え方は理解できたようですが、ビューとコントローラーで HTML と JS が繰り返されていることは間違いありません。改善できるかどうか見てみましょう。

DOM の直接操作を避けるために、jQuery なしでこれを試してみましょう。そして、多くのコントローラーの代わりに、単一のコントローラーでこれを行うことができます。
```
<div ng-app="MyApp">
    <div ng-controller="MyController">
    ...
    </div>
</div>
<script type="text/javascript">
    var app = angular.module('MyApp', []);
    app.controller('MyController', ...);
</script>
```

ドロップダウンでは、ビューで ng-repeat を使用し、モデルの撮影タイプの名前を表示します

...
<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>

コントローラーが 1 つしかない場合でも、リストごとに 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>

最後に...ドロップダウンから選択した撮影タイプに一致するリストのみを表示するにはどうすればよいですか? カスタム 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をより効果的に活用する方法についてのアイデアが得られることを願っています:)

CodePen 全体がここにあります。

javascript - AngularJS を使用して WP-API からの結果を組み合わせる

1 に答える 1

Related

Reference