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

Angular 是一个很棒的 JavaScript 前端框架，你有一个良好的开端，但可以做很多更改。我做了一些建议的更改，以便更轻松地在下面做事。

有关所有更改，请参阅此代码笔。

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

1. 让我们在没有jQuery的情况下尝试一下，以避免直接操纵DOM。我们可以用一个控制器来做到这一点，而不是许多控制器。

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

2. 对于下拉菜单，我们将在视图中使用 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>
   

3. 只有一个控制器，我们仍然可以对每个列表使用 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. 最后。。。我们如何仅显示与下拉列表中所选拍摄类型匹配的列表？我们可以使用自定义的角度滤镜！

   ...
   <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都在这里。