I currently have this site - http://dev.5874.co.uk/scd-data/ where I have a dropdown which displays results from WP-API which I am pulling in through AngularJS.

It currently combines the two sets of results as they're separate URL's, the results are in categories within a custom post type so if both posts are 'tagged' in the same category chosen they display twice. I need a way to combine the two sets of results but only showing one of the posts - I hope this makes sense. I'm very new to API data and AngularJS and I imagine there is a much simpler way of doing this. Any help would be much appreciated. Here is a snippet of my code to show how it's currently working.

Thanks in advance!

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


    .desc {display: none;}


<script type="text/javascript">
                                var selected = $(this).find(':selected').text();
                                 $('#' + selected).show();


    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;

         <select class="selectOption">
                        <option>Search by Region</option>

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

I'll assume the html you posted is a template that is part of a theme or plugin where you can interact with the page loading routines.

You do not need to load jQuery, it is already loaded by WordPress. Instead, you should leverage the script loading system. The third parameter in wp_enqueue_script states dependencies: my-app needs angular to be loaded, angular needs jQuery to be loaded.

add_action( 'get_header', 'add_to_header');

function add_to_header () {
    add_action( 'wp_enqueue_scripts', 'add_my_scripts');

function add_my_scripts () {
    wp_enqueue_script('angular', 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js', array( 'jquery' ));
    // you could load your angular app script here from a separate file, like:
    wp_enqueue_script('my-app', 'path/to/my-app.js', array( 'angular' ));

From a look at your page, I can see no reason why you need more than one controller, or more than one regional listing areas. Leave off the style and jQuery script, position your select(s) inside the controller scope and set a value for each option:

<select ng-model="region" ng-change="load(region)">
    <option value="northwest">NorthWest</option>

Your controller then should have a function loading the regional data only as needed:

var url = 'http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=';
$scope.data_ready = false;
$scope.load = function (region) {
    $http.get(url + region).then(function(data) {
    $scope.data = data.data;
    $scope.data_ready = true;

The data_ready variable will hide or show your listing area:

<div ng-show="data_ready">
   <div ng-repeat="d in data">

As the data loaded changes, so will content of the listing area.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.