A simple component which helps you integrate TravelPayouts search form into your angularjs app. Demo.
-
You can install this component via bower, npm or clone this repository into your project folder.
-
Include scripts on your page:
<!doctype html> <html ng-app="myApp"> <head> <link rel="stylesheet" href="/bower_components/tp-ng-search/dist/tpSearchComponent.styles.css"> </head> <body> ... <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/ <script src="/bower_components/tp-ng-search/dist/tpSearchComponent.js"></script> <script> var myApp = angular.module('myApp', ['glook.travelPayoutsSearchComponent']); </script> ... </body> </html>2.1. Or just include it using webpack:
//require stylesheets require('tp-ng-search/dist/tpSearchComponent.styles.css'); // seting app dependencies var app = angular.module('myApp', [ require('tp-ng-search') ]); -
Set object with searching data and callback function on your controller:
// You can set initial params or pass empty object via $scope.formData = {}; $scope.formData = { origin: 'MOW', destination: 'NYC', adults: 1, children: 2, infants: 3 }; // Don't forget to set callback function $scope.submit = function () { var data = JSON.stringify($scope.formData); alert('Form data:' + data); }; -
Pass component to your controller template:
<search-form lang="en" form-data="formData" on-submit="submit()"></search-form>