Search Posts

Category: tabs

Tabs in AngularJS (v1.5.5)

I tried to achieve that using Angular-material (last version 1.1.8), but I am getting the following error: Error: [$injector:unpr] Unknown provider: $mdUtilProvider <- $mdUtil <- layoutDirective <- $mdTheming The code is here: https://codepen.io/mrfabio/pen/QrLxNE <div class=”sample tabsdemoDynamicTabs” layout=”column” ng-cloak=””> <md-content class=”md-padding”> <md-tabs md-selected=”selectedIndex” md-border-bottom=”” md-autoselect=”” md-swipe-content=””> <md-tab ng-repeat=”tab in tabs” ng-disabled=”tab.disabled” label=”{{tab.title}}”> <div class=”demo-tab tab{{$index%4}}” style=”padding: 25px; text-align: center;”> <div ng-bind=”tab.content”></div> <br> <md-button class=”md-primary md-raised” ng-click=”removeTab( tab )” ng-disabled=”tabs.length <= 1″>Remove Tab</md-button> </div> </md-tab> </md-tabs> </md-content> […]

Loses data when swiching tabs in angular.js

I have the view which is the picture below and we generate two different reports one for a driver and one for a vehicle by clicking on the generate report button. The data is calculated correctly and they are displayed correctly at the first time. But when we are inside the vehicle report and swich tab to display details the report displays data from driver instead of the vehicle. So it loses the current information […]

Navigate from Landing to a specific Tab dynamic in Ionic 2+

The application opens to a landing page, named IntroPage, which has two buttons on it, BUY and SELL. When one of these buttons is clicked, it either takes you to the buy or sell Tab. I have tried three different techniques, based on research from different sources such as this, this, and this. For instance: A: this.navCtrl.setRoot(TabsPage); B: this.navCtrl.parent.select(2); C: selectTab(index: number) { var t: Tabs = this.navCtrl.parent; t.select(index); } My current setup: INTRO <button […]

AngularJS Search filter only applying to active tab

<uib-tabset active=”activeForm.i”> <uib-tab index=”$index” ng-repeat=”data in selected.data” ng-click=”setTab($index)” heading={{data.name}} > <div class=”row”> <div class=”col-xs-6 col-sm-6 col-lg-6 col-md-6; center; vAlignTop” style=”padding-bottom: 5px;” ng-repeat=”x in selected.data | filter:search ” ng-if=”data.name == x.name”> So the search filter does work but the way that I need to display my data, it’s creating multiple tabs, and the filter appears to be only applying to the active tab that is opened, I need to it apply to all the tabs and […]

Bootstrap tab redirects me to another HTML page

I’ve been working on a tab feature of my AngularJS program and I’ve come across an issue with the HTML coding for said feature. Effectively when I load the page, the information is presented as I would like it to be. However, once I click on the tab it redirects me to the main page of the application I’m working on. Am I missing anything which is causing me this bug? <div class=”profile-body”> <div class=”col-lg-12″> […]

Angular md-tab & ng-repeat: adding custom style to specific tabs

I’m trying to customize a couple tabs because they’re different. Here’s what I have: <md-tabs> <md-tab ng-repeat=”tab in tabs” ng-class=”tab.customClass”> <md-tab-label ng-bind=”tab.label”></md-tab-label> </md-tab> </md-tabs> My issue: the custom class is not in the compiled md-tab-item I don’t know how many tabs I have, so I cannot write CSS based on position. Any ideas? Source: AngularJS

AngularJS Select Tab from Button Click

Using the AngularJS tabs directive, is there a way to select a tab from a button. Effectively what I would like to do is click the button ‘Select Tab 3’ and the third tab will be selected. <md-button id=”button” class=”md-raised”>Select Tab Three</md-button> <div ng-cloak> <md-content> <md-tabs md-dynamic-height md-border-bottom> <md-tab label=”one”> <md-content class=”md-padding”> <h1 class=”md-display-2″>Tab One</h1> </md-content> </md-tab> <md-tab label=”two”> <md-content class=”md-padding”> <h1 class=”md-display-2″>Tab Two</h1> </md-tab> <md-tab label=”three” id=”three”> <md-content class=”md-padding”> <h1 class=”md-display-2″>Tab Three</h1> </md-content> </md-tab> […]