使用 AngularJS 合并 WP-API 的结果
Combining results from WP-API using AngularJS
我目前有这个网站 - http://dev.5874.co.uk/scd-data/ 我有一个下拉菜单,其中显示了我通过 AngularJS 拉入的 WP-API 的结果。
它目前合并了两组结果,因为它们是分开的 URL,结果在自定义 post 类型的类别中,所以如果两个 post 都是'tagged' 在所选的同一类别中,它们显示了两次。我需要一种方法来组合两组结果,但只显示一个 posts - 我希望这是有道理的。我对 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 front-end 框架可供选择,您有了一个良好的开端,但还可以进行很多更改。我在下面做了一些建议的更改,以便更轻松地执行操作。
See this CodePen for all changes.
看起来你已经掌握了ng-repeat的思路,但是你的view和controller中肯定有很多重复的HTML和JS,让我们看看能不能做得更好。
让我们在没有 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>
对于下拉菜单,我们将在我们的视图中使用 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>
只有一个控制器,我们仍然可以为每个列表使用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 :)
我目前有这个网站 - http://dev.5874.co.uk/scd-data/ 我有一个下拉菜单,其中显示了我通过 AngularJS 拉入的 WP-API 的结果。
它目前合并了两组结果,因为它们是分开的 URL,结果在自定义 post 类型的类别中,所以如果两个 post 都是'tagged' 在所选的同一类别中,它们显示了两次。我需要一种方法来组合两组结果,但只显示一个 posts - 我希望这是有道理的。我对 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 front-end 框架可供选择,您有了一个良好的开端,但还可以进行很多更改。我在下面做了一些建议的更改,以便更轻松地执行操作。
See this CodePen for all changes.
看起来你已经掌握了ng-repeat的思路,但是你的view和controller中肯定有很多重复的HTML和JS,让我们看看能不能做得更好。
让我们在没有 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>
对于下拉菜单,我们将在我们的视图中使用 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>
只有一个控制器,我们仍然可以为每个列表使用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 :)