We Keep Coding

AngularJS - Hide parent div on click, then display next div

I'm trying to use Angular to write a page where I have a form divided into multiple sections, and only one form section is displayed at a time. When clicking the button at the bottom of the section, the current section is hidden and the next form section in the HTML is displayed -- so on and so forth for many sections.
Here's my code so far:
HTML:
<form>
<div class="form-section">
<!-- input fields -->
<a class="next">NEXT</a>
</div>
<div class="form-section">
<!-- input fields -->
<a class="next">NEXT</a>
</div>
<!-- more "form-section" divs -->
</form>
CSS:
/* hide all form sections */
.form-section {
display:none;
}
/* display first form section */
.form-section:first-child {
display:initial;
}
.next {
cursor:pointer;
}
I'm pretty new at Angular so I'm pretty lost as to how to achieve this.

So to get you started (besides the google link I originally put) this is a super basic example showing one way on how to show and hide divs using angular. If I was making an actual app, I would probably use routes for this part, but for sake of simplicity I didn't. This could get you started in the right direction.
https://jsfiddle.net/t76e8gt9/
HTML
<div ng-app="MultiStep" ng-controller="FormController">
<h1>
Step {{currentStep}}
</h1>
<div ng-if="currentStep == 1">
<label>Name</label>
<input type="text" placeholder="Name"/>
</div>
<div ng-if="currentStep == 2">
<label>Email</label>
<input type="email" placeholder="Email"/>
</div>
<div ng-if="currentStep == 3">
<label>Gender</label><br>
<labe>Male</labe><input type="radio" value="male" name="gender" /><br>
<label>Female</label><input type="radio" value="female" name="gender" />
</div>
<button ng-click="nextStep()">Next</button>
</div>
JS
var app = angular.module('MultiStep', []);
app.controller('FormController', function($scope) {
$scope.currentStep = 1;
$scope.nextStep = function() {
$scope.currentStep++;
}
});
Please, still look at some of the multistep tutorial

You need to call function on the anchor tag using angular ngClick. In that just change the $scope variable value true or false.
<div ng-controller="MainCtrl">
<form>
<div class="form-section" ng-if="firstForm">
<!-- input fields -->
<a class="next" ng-click="showForm('First')">NEXT</a>
</div>
<div class="form-section" ng-if="firstForm">
<!-- input fields -->
<a class="next" ng-click="showForm('Second')">NEXT</a>
</div>
<!-- more "form-section" divs -->
</form>
</div>
app.controller('MainCtrl', function($scope) {
$scope.firstForm = true;
$scope.secondForm = false;
$scope.showForm = function(param) {
switch(param){
case 'First':
$scope.firstForm = true;
$scope.secondForm = false;
break;
case 'Second':
$scope.firstForm = fale;
$scope.secondForm = true;
break;
default:
$scope.firstForm = true;
$scope.secondForm = false;
break;
}
}
});

Depends on what you mean by hide, you can either use ng-if or ng-show/ng-hide to selectively display stuff on screen.
ng-if will not render the DOM whereas ng-show/ng-hide will use CSS to set it's display as none.
You can have something like:
<form>
<div class="form-section" ng-if="condition == 'div1'">
<!-- input fields -->
<!--Some way to change value of condition-->
<a class="next" ng-click="showDiv('div2')">NEXT</a>
</div>
<div class="form-section" ng-if="condition == 'div2'">
<!-- input fields -->
<a class="next" ng-click="showDiv('div3')">NEXT</a>
</div>
<!-- more "form-section" divs -->
And have a JS function to change value of condition.
$scope.showDiv = function(divName) {
$scope.condition= divName;
}

Can't append divs when using ng-switch-when AngularJS?

I am using ng-switch when method to append divs. This is the code created
<input type="checkbox" ng-model="data" />
<ng-switch on="data">
<span ng-switch-when="true">
<div class="firstSwitch"></div>
</span>
<span ng-switch-default>
<div class="secondSwitch"></div>
</span>
</ng-switch>
Its working fine now. But when i want to append something in the div.
Say, i want to append text using javascript inside secondSwitch div, but i can't append it because initially the secondSwitch div is not appended.
setTimeout(function(){
$(".secondSwitch").html("<p>Second Switch is displayed</p>");
$(".firstSwitch").html("<p>First Switch is displayed</p>");
},100);
Here the text is appended properly inside firstSwitch div because initially it is created but the text is not appended inside secondSwitch div because it's not created.
So, i can't append inside that div. So, how to overcome this problem guys. Here is the Plnkr

As you already noticed ng-switch modifies DOM and firstSwitch is not created initially. You should use binding to get this working. Here is working demo
<ng-switch on="data">
<span ng-switch-when="true">
<div class="firstSwitch"><p>{{firstText}}<p></div>
</span>
<span ng-switch-default>
<div class="secondSwitch"><p>{{secondText}}<p></div>
</span>
app.controller('MainCtrl', function($scope, $timeout) {
$scope.data = false;
$timeout(function(){
$scope.firstText = "First Switch is displayed";
$scope.secondText = "Second Switch is displayed";
},100);
Update
And here's demo for binding to html

Try this
<div class="secondSwitch"><div id="replacediv"></div></div>
var divElement = angular.element(document.querySelector('#replacediv'));
var appendHtml = $compile('<div>test</div>')($scope);
divElement.append(appendHtml);

you can use ng-show directive for this.
// Code goes here
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope,$timeout) {
$scope.data = false;
$scope.show = false;
$scope.change = function(){
$timeout(function(){
$scope.show = !$scope.show;
},300);
}
});
<script src="http://code.jquery.com/jquery-1.12.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="plunker">
<div ng-controller="MainCtrl">
<input type="checkbox" ng-model="data" ng-change="change()" />
Check
<ng-switch on="data">
<span ng-switch-when="true">
<div class="firstSwitch">
<p ng-show="show">First Switch is displayed</p>
</div>
</span>
<span ng-switch-default>
<div class="secondSwitch">
<p ng-show="!show">Second Switch is displayed</p>
</div>
</span>
</ng-switch>
</div>

Check if div is hidden in AngularJS from controller?

I have a div that I am hiding/showing using angular in my HTML, but I want to know how to check if it is currently hidden or not in my controller.
Any solutions I have found so far are jQuery based using 'hasClass' to find ng-hide, but I don't want to use jQuery.
My div looks like this
<div class="item item-input" ng-show="showDetails"></div>
<button class="button button-block button-light leftTextButton"
ng-click="showDetails = ! showDetails; updateTimes()">
<i ng-class="{'icon icon ion-minus-round': showDetails,
'icon icon ion-plus-round': !showDetails}"></i> End Time</button>
I thought from my controller I could just call if($scope.showDetails) and that would return true or false, but it is undefined.
How can I check if a div if hidden or showing from my controller? Thanks

I'm guessing you are having a scoping issue. Passing it to the function that will check it is the best bet. Otherwise if it is in scope the controller should be able to access it.
angular.module('MyApp', [])
.controller('MyController', ['$scope',
function($scope) {
$scope.myBoolean = false;
$scope.checkMyBooleanOnScope = function() {
alert($scope.myBoolean);
};
$scope.checkMyOtherBooleanOnScope = function() {
alert($scope.myOtherBoolean);
};
$scope.checkBooleanByPassingIt = function(bool) {
alert(bool);
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="MyController">
<p>myBoolean predefined in the controller:{{myBoolean}}
<input type="checkbox" ng-model="myBoolean" />
</p>
<p>
<button ng-click="checkMyBooleanOnScope()">checkMyOtherBooleanOnScope</button>
<button ng-click="checkBooleanByPassingIt(myBoolean)">checkMyBooleanByPassingIt</button>
</p>
<p>myOtherBoolean defined on the page with ng-model:{{myOtherBoolean}}
<input type="checkbox" ng-model="myOtherBoolean" />
</p>
<p>
<button ng-click="checkMyOtherBooleanOnScope()">checkMyBooleanOnScope</button>
<button ng-click="checkBooleanByPassingIt(myOtherBoolean)">checkMyOtherBooleanByPassingIt</button>
</p>
</div>

Angularjs ng-show on ng-click not working

I have created a button like with angularjs,
<button class="btn btn-setting" ng-click="showSearch = ! showSearch" >
<img src="theme/images/settings.png" width="111">
</button>
And a div like ,
<div ng-include="'pages/include/search.html'" ng-show="showSearch" ></div>
I need to toggle the visibility of the above div on the button click.but it is not showing.

Update the showSearch model as follows
$scope.showSearch = {hideShowSearch : false}
Updated HTML
<button class="btn btn-setting" ng-click="showSearch.hideShowSearch = ! showSearch.hideShowSearch" >
<img src="theme/images/settings.png" width="111">
</button>
<div ng-show="showSearch.hideShowSearch" >This is the test</div>
EDIT -
In your script hideShowSearch is primitive one.So it does not perform two way data-binding.As result you not getting expected result.

Just do
<button ng-click="setshowme(show)"></button>
$scope.setshowme = function (value) {
if(value == true){
$scope.show = false;
}else{
$scope.show = true
}
}

Here is a simple JSFiddle
<button class="btn btn-setting" ng-init="showSearch = true" ng-click="showSearch = (showSearch) ? false : true;" >
<img src="theme/images/settings.png" width="111" />
</button>
<div ng-show="showSearch">Hello World</div>

First check these two elements (<button> & <div>) inside two ng-controllers
If so this will not work since ng-controllers have their own scopes. So that showSearch is in one scope and other controller scope do not have direct access to it.
Then check something like,
<div ng-show='showSearch'>show / hide div ...</div>
and see if this div is toggling its visibility.
if it working properly
then check the path to src of ng-include is correct.
here is a DEMO

Angular event 'ng-click' binding issue

I am having problem with angular ng-Click.
My Controller
var ParentController = function ( ) {
this.MyEvent = function () {
alert('foo-bar');
};
this.AddHTML= function () {
$("#ButtonSec").html('<input type='button' ng-click='Parent.MyEvent()' value='inner button'/>');
};
};
angular.module('myApp', []).controller('ParentController', ParentController);
HTML - 1 (Works as expected button ng-click binds to 'inner button' as expected):
<div ng-app='testComponent'>
<div id="content" ng-controller="ParentController as Parent">
<div id="ButtonSec">
<input type='button' ng-click='Parent.MyEvent()' value='inner button'/>
</div>
</div>
</div>
HTML-2 (Not working):When rendering html using Add HTML button. Event not binding to inner button as it should (important thing I can't use $scope as per client requirement)
<div ng-app='testComponent'>
<div id="content" ng-controller="ParentController as Parent">
<div id="ButtonSec">
</div>
<input type='button' ng-click='Parent.AddHTML()' value='Add HTML'/>
</div>
</div>

I'd suggest you to use ng-if directive which will add or remove html on the Expression which we will provide to it. To showing hiding that div you need to maintain one variable inside your controller context that will be responsible for showing that div on html.
Html
<div ng-app='testComponent'>
<div id="content" ng-controller="ParentController as Parent">
<div ng-if="Parent.showContent" id="ButtonSec">
<input type='button' ng-click='Parent.MyEvent()' value='inner button'/>
</div>
<input type='button' ng-click='Parent.showContent = true' value='Add HTML'/>
</div>
</div>

Not sure why you don't want to use $scope because angular manage $scope eventually internally. This is hack way using $rootScope
var ParentController = function ($compile,$rootScope ) {
this.MyEvent = function () {
alert('foo-bar');
};
this.AddHTML= function () {
$("#ButtonSec").html($compile("<input type='button' ng-click='Parent.MyEvent()' value='inner button'/>")($rootScope.$$childHead));
};
};