We Keep Coding

How to display the contents of bootstrap modal tabs?

I am a very beginner to AngularJS,I have a bootstarp modal with 2 tabs I have made it to display only one tab at a time.In the modal I have two buttons NEXT and PREVIOUS I am able to switch between the tabs through these buttons.But the issue is the content in their respective tabs wont change when I change the tab.Where am I going wrong.Kindly help me.
<div class="modal-body">
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1" data-toggle="tab">
<div>{{current.data}}</div>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<textarea class="form-control" ng-model="first" name="first" required></textarea>
<md-button class="md-raised md-primary" ng-click="next()">next</md-button>
<md-button class="md-warn md-raised" ng-click="previous()">previous</md-button>
</div>
<div class="tab-pane" id="tab2">
<textarea class="form-control" ng-model="second" name="second" required></textarea>
<md-button class="md-raised md-primary" ng-click="next()">next</md-button>
<md-button class="md-warn md-raised" ng-click="previous()">previous</md-button>
</div>
</div>
</div>
Controller.js
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.dataSet = [
{ data: "First", index: 0 },
{ data: "Second", index: 1 }
],
$scope.current = $scope.dataSet[0],
$scope.next = function() {
var i = $scope.getIndex($scope.current.index, 1);
$scope.current = $scope.dataSet[i];
},
$scope.previous = function() {
var i = $scope.getIndex($scope.current.index, -1);
$scope.current = $scope.dataSet[i];
},
$scope.getIndex = function(currentIndex, shift) {
var len = $scope.dataSet.length;
return (((currentIndex + shift) + len) % len)
}
});

I have updated your code with the ng-class attribute for your selected data kindly refer https://jsfiddle.net/jasonantho/fwowg8q5/

Expandable div with buttons in Angularjs

That's my problem: http://jsfiddle.net/2f6qscrp/311/
shortly: I've got a div that can be expandable and it reveals a new div. This kind of event must be in all div. So, in each section of this div I can open it (like an accordion). The problem is that if i click one of the buttons on this div (they must be there) the div opens. I would avoid this thing if possible. Is it possible?
<div ng-app='home'>
<!-- App goes here -->
<md-content md-scroll-y flex layout="column" class="_md ng-scope layout-column flex" layout-padding ng-controller="MainCtrl as mainCtrl">
<div layout="column" md-scroll-y>
<div layout="row" ng-click="showDetailsFunction();" class="div-outline-none div-cursor-pointer">
<h3 flex class="div-card-panel-title">
Blablablabla
</h3>
<span flex></span>
<ul flex class="div-doc-act div-flex">
<li>
<md-button class="md-icon-button no-margin"
data-ng-click="doGreeting('btn1');">
btn1
</md-button>
</li>
<li>
<md-button class="md-icon-button no-margin"
data-ng-click="doGreeting('btn2');">
btn2
</md-button>
</li>
<li>
<md-button class="md-icon-button no-margin"
data-ng-click="doGreeting('btn3');">
btn3
</md-button>
</li>
</ul>
</div>
<div data-ng-if="showDetails" class="animate-if">
<div>
wevniwernviurevnier
</div>
</div>
</div>
</md-content>
</div>
Angular part
angular.module('home', ['ngAria', 'ngAnimate', 'ngMaterial']);
angular.module('home').config(function ($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('pink')
.accentPalette('grey');
});
angular.module('home').controller('MainCtrl', function ($scope, $window) {
$scope.showDetails = false;
$scope.showDetailsFunction = function() {
$scope.showDetails = !$scope.showDetails;
};
$scope.greeting = 'Hello, World!';
$scope.doGreeting = function(greeting) {
$window.alert($scope.greeting + " " + greeting);
};
});

you can try using event.stopPropagation(); method to avoid the div opening on the button click.
$scope.(your div name) = function($event) {
$event.stopPropagation();
// Some code to find and display the next image
}

Md-tabs AngularJS working once only

I am new at using angularjs and I've been encountering some issues on md-tabs. The next button is working but when I click again on the first tab the next button is not working anymore. Can you please take a look on my codes and tell me what's wrong. Thanks!
VIEW
<div class="row">
<div class="col-md-12" ng-class="{ 'blur' : vm.preloader.action }">
<md-tabs md-dynamic-height md-border-bottom md-selected="selectedIndex">
<md-tab label="Campaign Details">
<md-content class="md-padding">
<div class="md-content">
<div class="row" style="margin-top: 3%;">
<div class="col-md-6">
Content 1
</div>
</div>
<br>
<div class="row">
<div class="col-md-3">
<button class="btn btn-primary btn-lg" style="border-radius: 0; padding-right: 50px; padding-left: 50px; width: 100%;" ng-click="nextTab()">NEXT</button>
</div>
</div>
</div>
</md-content>
</md-tab>
<md-tab label="Recipients">
<md-content class="md-padding">
<div class="md-content">
<div class="row">
Content 2
</div>
<div class="row">
<div class="col-md-3">
<button class="btn btn-primary btn-lg" ng-click="nextTab()" style="width: 100%;">NEXT</button>
</div>
</div>
</div>
</md-content>
</md-tab>
<md-tab label="Confirm">
<md-content class="md-padding" ng-show="show_send_to_all">
<div class="md-content">
<div class="row" style="margin-top: 3%;">
Content 3
</div>
<div class="row">
<div class="col-md-3">
<button class="btn btn-primary btn-lg" ng-click="" style="width: 100%;">SEND</button>
</div>
</div>
</div>
</md-content>
</md-tab>
</md-tabs>
</div>
CONTROLLER:
(function(){
'use strict';
angular
.module('app')
.controller('SmsManagementController', SmsManagementController);
SmsManagementController.$inject = ['$rootScope', 'PreloaderService', 'ToastService', '$mdDialog', 'CaptchaService', '$localStorage', 'StaffRole', 'API'];
function SmsManagementController($rootScope, PreloaderService, ToastService, $mdDialog, CaptchaService, $localStorage, StaffRole, API) {
var vm = this;
// Variables
vm.totalrecord = { general: 0 };
vm.publicKey = API.captchakey;
vm.displayCaptcha = !($.inArray($localStorage.currentUser.role, StaffRole) > -1);
vm.preloader = {
general: true
};
// Initialization
Initialize();
// Public functions
function Initialize(){
PreloaderService.Display();
PreloaderService.Hide();
}
//Tabs
$rootScope.max = 2;
$rootScope.selectedIndex = 0;
$rootScope.nextTab = function() {
var index = ($rootScope.selectedIndex == $rootScope.max) ? 0 : $rootScope.selectedIndex + 1;
$rootScope.selectedIndex = index;
};
}
})();
Or maybe you can suggest a code on how will I convert this on jquery or javascript in order for me to have a next buttons for the tabs. I'm using a material design tabs of angularjs.

Your NEXT button is not working because in your next() method you are doing iterations on $rootscope, do those iterations on $scope..
$scope.max = 2;
$scope.selectedIndex = 0;
$scope.nextTab = function() {
var index = ($scope.selectedIndex == $scope.max) ? 0 : $scope.selectedIndex + 1;
$scope.selectedIndex = index;
};
You are using controllerAs syntax so prefer using vminstead of $scope and also pass vm.selectedIndex here
<md-tabs md-dynamic-height md-border-bottom md-selected="vm.selectedIndex">

Finally, I figured it out.
Instead of using $rootscope, I changed it to vm. So, here's my new code for the tabs:
//Tabs
vm.max = 2;
vm.selectedIndex = 0;
$rootScope.nextTab = function() {
var index = (vm.selectedIndex == $rootScope.max) ? 0 : vm.selectedIndex + 1;
vm.selectedIndex = index;
};
And based on #Rakeschand solution, I passed vm.selectedIndex like this:
<md-tabs md-dynamic-height md-border-bottom md-selected="vm.selectedIndex">
Thanks #Rakeschand for the idea :)

How to add or disable(remove)md-disable-backdrop pragmatically in md-sidenav

Is it possible to remove md-disable-backdrop attribute from HTML ?
The md-sidenav md-disable-backdrop attribute is not added when i open the side navigation. The i make a selection from the form i just displayed in the side navigation and now i want to add the md-disable-backdrop attribute to the md-sidenav
<md-sidenav md-component-id="right" class="md-sidenav-right md-whiteframe-4dp" md-disable-backdrop id="rightSideNav">

Here you go - CodePen
If you inspect the md-sidenav element you will see the md-disable-backdrop attribute toggled. Note: this won't toggle the backdrop, which is what I suspect you actually want.
Markup
<div ng-controller="AppCtrl" layout="column" ng-cloak="" ng-app="MyApp">
<md-content flex="" layout-padding="">
<div layout="column" layout-fill="" layout-align="top center">
<div>
<md-button ng-click="toggleRight()" ng-hide="isOpenRight($event)" class="md-primary">
Toggle right
</md-button>
</div>
</div>
<div flex=""></div>
</md-content>
<md-sidenav id="mySideNav" class="md-sidenav-right md-whiteframe-4dp" md-component-id="right">
<md-content ng-controller="RightCtrl" layout-padding="">
<md-button ng-click="close()" class="md-primary">
Close Sidenav Right
</md-button>
<md-button ng-click="toggleMdDisableBackdrop()">Toggle md-disable-backdrop</md-button>
</md-content>
</md-sidenav>
</div>
JS
angular
.module('MyApp',['ngMaterial'])
.controller('AppCtrl', function ($scope, $mdSidenav, $element) {
$scope.mdDisableBackdrop = false;
$scope.sideNav = angular.element($element[0].querySelector('#mySideNav'));
$scope.toggleRight = function() {
$mdSidenav('right')
.toggle()
.then(function () {
});
}
})
.controller('RightCtrl', function ($scope, $mdSidenav) {
$scope.close = function () {
$mdSidenav('right').close();
};
$scope.toggleMdDisableBackdrop = function () {
if ($scope.mdDisableBackdrop) {
$scope.sideNav.removeAttr('md-disable-backdrop');
}
else {
$scope.sideNav.attr("md-disable-backdrop", "true");
}
$scope.mdDisableBackdrop = !$scope.mdDisableBackdrop;
};
});

AngularJS Multistep Form Single page application

I am creating a multi step form using AngularJS. I am not getting how to get the previous step. Flow of my form is two way. One can go from step 1 to step 4 via A way step1-->step2-->step3-->step4 and B way is step1-->step3-->step4.
I used <button class="SubmitPrev" ng-click="step = 1">Prev</button> code for getting the previous step. But when user is going by A way then previous step of step3 should be step2 and via B way the previous step of step3 should be step1. In step3, i can not use my previous button code because previous step of step3 depends on which way user is coming. I also tried to create alias of step3 but its increasing the number of lines as my form is consists of many steps with many ways. Is there any other way to call the previous step?
// Code goes here
var app = angular.module("MyApp", []);
app.controller('MyCtrl', function($scope, $timeout) {
$scope.name = '';
$scope.data = {
singleSelect: null,
multipleSelect: [],
option1: 'option-1',
};
$scope.forceUnknownOption = function() {
$scope.data.singleSelect = 'nonsense';
};
});
<!DOCTYPE html>
<html ng-app="MyApp" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body ng-controller="MyCtrl">
<form name='myform' id="myform" ng-init="step = 1" ng-submit="submitForm(myform.$valid)">
<div ng-show="step==1">
<h3>Which step</h3>
<div ng-form='step1form'>
<input type="radio" ng-disabled="!step1form.$valid" ng-click="step = 2"><p>Step 2</p>
<input type="radio" ng-disabled="!step1form.$valid" ng-click="step = 3"><p>Step 3</p>
</div>
</div>
<div ng-show="step==2">
<h3 class="zoomIn">which step</h3>
<div ng-form='step2form'>
<input type="radio" ng-disabled="!step2form.$valid" ng-click="step = 3"><p>Step 3</p>
<button class="SubmitPrev" ng-click="step = 1">Prev</button>
</div>
</div>
<div ng-show="step==3">
<h3 class="zoomIn">which step</h3>
<div ng-form='step3form'>
<input type="radio" ng-disabled="!step3form.$valid" ng-click="step = 4"><p>Step 4</p>
</div>
</div>
<div ng-show="step==4">
<h3 class="zoomIn">which step</h3>
<div ng-form='step4form'>
<p>Finish</p>
</div>
</div>
</form>
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
<script src="script.js"></script>
</body>
</html>

you can use: Angular Multi step form
multiStepForm is an angular module to create multi step forms and wizards. Create your steps like your would create your views with ngRoute or ui-router!
some of the main features:
Steps are controlled views and are easily configured
Isolated or non isolated scopes for steps
Track step validity if it contains a form

Store the current and previous step in your controller. So when clicking the previous button, set the current step to the previous step.
If that doesn't make sense, let me know and I'll provide a Plunker.
Here's a quick Plunker to demonstrate:
https://plnkr.co/edit/ofha6qAyNgJZj7XQ5Zk7?p=preview
Html:
<body ng-controller="MainCtrl as main">
<div ng-if="currentStep == 1">
<h1>Step 1</h1>
<button ng-click="setStep(2)">Go to step 2</button>
<button ng-click="setStep(3)">Jump to step 3</button>
</div>
<div ng-if="currentStep == 2">
<h1>Step 2</h1>
<button ng-click="setStep(3)">Go to step 3</button>
</div>
<div ng-if="currentStep == 3">
<h1>Step 3</h1>
</div>
<br>
<button ng-if="previousStep > 0" ng-click="setStep(previousStep)">Go to your previous step ({{previousStep}})</button>
<button ng-if="currentStep > 1" ng-click="setStep(currentStep - 1)">Go to {{currentStep - 1}}</button>
</body>
JS:
var app = angular.module('angularApp', []);
app.controller('MainCtrl', function($scope, $http) {
$scope.currentStep = 1;
$scope.previousStep = 0;
$scope.setStep = function(step) {
if (step == 1) { // If first step hide previous button
$scope.previousStep = 0;
} else {
$scope.previousStep = $scope.currentStep;
}
$scope.currentStep = step;
}
});