I have 3 tabs: customers, billing, and method. On the first tab I have the Bootstrap Typeahead, that is connected to a json file of customers. The second tab is a detailed view of the customer account with outstanding charges. Finally, the third tab is to actually charge the customer with a credit card. Additionally, I am using UI Router to navigate through a complex hierarchy. the tabs are named views of a page called make-payments, which is a child of a parent state called payments. I am trying to use the typeahead in the first tab (customers) to select and view a customer detail in the second tab (billing). I am hoping this happens when the user selects the person from the dropdown, they should immediately navigate to the next tab, and the next tab should show that persons details. I am having some difficulty really understanding how to get the data from the typeahead to the next two tabs, and if I need a service to do this or not.
make-payment.html(My tabs):
<h3 class="text-center">Make a One-Time Payment</h3>
<uib-tabset type="pills nav-pills-centered">
<uib-tab heading="1">
<div ui-view=customers></div>
</uib-tab>
<uib-tab heading="2">
<div ui-view=billing></div>
</uib-tab>
<uib-tab heading="3">
<div ui-view=method></div>
</uib-tab>
</uib-tabset>customers.html & the typeahead.js ctrl:
angular
.module('myApp')
.controller('TypeAheadCtrl', function($scope, $http) {
$http.get('customers.json').success(function(data) {
$scope.customers = data;
});
var self = this;
self.submit1 = function() {
console.log('First form submit with', self.customer)
};
});<div ng-controller="TypeAheadCtrl as ctrl">
<form ng-submit="ctrl.submit1()" name="customerForm">
<div class="form-group">
<label for="account">Account Number</label>
<input type="text" class="form-control" placeholder="Search or enter an account number" ng-model="ctrl.customer.account" uib-typeahead="customer as customer.index for customer in customers | filter:$viewValue | limitTo:6" typeahead-template-url="templates/customer-tpl.html"
typeahead-no-results="noResults">
</div>
</form>
</div>app.js (where I have ui-router stuff)
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/payments/make-payment');
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('payments', {
url: '/payments',
templateUrl: 'views/payments.html'
})
.state('activity', {
url: '/activity',
templateUrl: 'views/activity.html'
})
// nested lists
.state('payments.make-payment', {
url: '/make-payment',
views: {
'': {
templateUrl: 'views/make-payment.html'
},
'[email protected]': {
templateUrl: 'views/customers.html'
},
'[email protected]': {
templateUrl: 'views/billing.html'
},
'[email protected]': {
templateUrl: 'views/method.html'
});
});billing.html
<p>{{ctrl.customer.account.name}}</p>
<p>{{ctrl.customer.account.address}}</p>
<p>{{ctrl.customer.account.email}}</p>
<p>{{ctrl.customer.account.phone}}</p>
