Get Custom Post Type Taxonomy name using angularJs search filter

Wednesday, March 01, 2017

Follow this simplest steps for getting custom post type data using angularJs text input search filter. 
First of all include live jQuery, angularJs live Library and create a custom js file.

Download and install WordPress REST API (Version 2)



you can skip next step if you want to fetch default post type data only.

otherwise, 
we need to add REST API Support for Custom Content types

for already created taxonomy, 
add:
add_action( 'init', 'my_custom_taxonomy_rest_support', 25 );
function my_custom_taxonomy_rest_support() {
 global $wp_taxonomies;
 
 //be sure to set this to the name of your taxonomy!
 $taxonomy_name = 'your_custom_taxonomy_name';
 
 if ( isset( $wp_taxonomies[ $taxonomy_name ] ) ) {
   $wp_taxonomies[ $taxonomy_name ]->show_in_rest = true;
 
   // Optionally customize the rest_base or controller class
   $wp_taxonomies[ $taxonomy_name ]->rest_base = $taxonomy_name;
   $wp_taxonomies[ $taxonomy_name ]->rest_controller_class = 'WP_REST_Terms_Controller';
 }
}

read full here : http://v2.wp-api.org/extending/custom-content-types/

open browser and navigate: http://example.com/wp-json/wp/v2/your_custom_taxonomy_name



It should show you your taxonomy in JSON format.

open js file and

add
angular.module('myApp', []).controller('namesCtrl', function($scope, $http) {
   $http.get("http://example.com/wp-json/wp/v2/your_custom_taxonomy_name")
  .then(function (response) {
  $scope.names = response.data;
  })
});

open template
<div ng-app="myApp" ng-controller="namesCtrl">
<p><input id="txtbilal" type="text" ng-model="test"></p>
<ul id="customData">
 <li ng-repeat="x in names | filter:test">
   <a href="{{ x.link }}">{{ x.name }}</a>
 </li>
</ul>
</div>

here's my text box which fadeIn result on text input

you can also add a simple fadeIn jQuery function like me,

$('#customData').css('display','none');
$('#txtbilal').on("focusin", function(){
$('#customData').fadeIn('slow')
});

You Might Also Like

2 comments

  1. I like your post very much. It is very much useful for my research. I hope you to share more info about this. Keep posting angular certification

    ReplyDelete

Popular Posts

Subscribe