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;
}
Related
I have a row of links, and depending on which one is clicked, a certain file gets loaded inside the "main" #DIV_main area where things are seen/clicked/viewed.
The HTML file, say HOME.HTML is:
HOME.HTML
<DIV id="DIV_TOP_LINKS">
<a class="nav_links" id="a_a" href="File_one.php">one</a>
<a class="nav_links" id="a_b" href="MAIN_UI.php">MAIN</a>
<a class="nav_links" id="a_c" href="File_two.php">two</a>
</DIV>
<DIV id="DIV_main ">
<!-- files MAIN_UI.php, File_one/two.php etc go here -->
</DIV>
the Javascript is:
$(document).ready(function(){
$("#DIV_TOP_LINKS a").click(function(e){
e.preventDefault();
$("#DIV_main").load(e.target.href);
});
$("#BTN_a").click(function(e){ //these dont work
alert("helo a");
});
$("#BTN_c").click(function(e){ //these dont work
alert("helo b");
});
});
function CH_ANGE(th, txt)
{ switch(txt)
{ case "a_click":
$("#DIV_A_inputs").show();
$("#DIV_B_inputs").hide();
$("#DIV_C_inputs").hide();
break;
case "b_click":
$("#DIV_A_inputs").hide();
$("#DIV_B_inputs").show();
$("#DIV_C_inputs").hide();
break;
case "c_click":
$("#DIV_A_inputs").hide();
$("#DIV_B_inputs").hide();
$("#DIV_C_inputs").show();
break;
}
MAIN_UI.php file is as follows:
<div id="DIV_post_type">
<div id="BTN_a" onclick="CH_ANGE(this, 'a_click')">Button A</div>
<div id="BTN_b" onclick="CH_ANGE(this, 'b_click')">Button B</div>
<div id="BTN_c" onclick="CH_ANGE(this, 'c_click')">Button C</div>
<button id="BTN_Post_Wall" onClick="POST_AJAX_INP_to_PHP_BUTTON()">POST</button>
</div>
<div id="DIV_abc">
<div id="DIV_A_inputs">Div_A and other content
<input TYPE="TEXT" ID="inp_A" NAME="INP_A">
</div>
<div id="DIV_B_inputs">Div_B and other content
<input TYPE="TEXT" ID="inp_B_1" NAME="INP_B_1">
<input TYPE="TEXT" ID="inp_B_2" NAME="INP_B_2">
<input TYPE="TEXT" ID="inp_B_3" NAME="INP_B_3">
</div>
<div id="DIV_C_inputs">
<input TYPE="TEXT" ID="inp_C_1" NAME="INP_C_1">
<input TYPE="TEXT" ID="inp_C_2" NAME="INP_C_2">
</div>
</div>
So the issues which I do not know how to implement are:
If you see the $(document).load function, there are 2 more event handlers for $("#BTN_a").click and $("#BTN_c").click. These two did not work, and then I thought its because essentially, they are 'linked' when the document HOME.HTML loads. The items BTN_a and BTN_c will only be there on the main page if the "MAIN" link click triggers a load of file MAIN_UI.php inside the #DIV_main. Is there a way to link $(document).load functions to elements which will arrive later on the page? or another $(something).load function in jquery I can use?
Thanks a ton in advance.
I'm trying to make a JS price calculator and I'm stuck on one part, where I do not find a solution for a couple of hours. I will appreciate your help.
This is what I'm trying to do:
Displaying part, where there are 3 product types (<input type="radio"). Clicking to one of them should appear with own LightBox and also hiding other parts of the <input> form.
<div>
<h2>Basic Price</h2>
<div id="singleSpotLB" style="display:block;">
<?php include "/Templates/singleSpotLightBox.php"?>
</div>
<div id="multiSpotLB" style="display: none;">
<?php include "/Templates/multiSpotLightBox.php"?>
</div>
<div id="photoSilkLB" style="display: none;">
<?php include "/Templates/photoSilk.php"?>
</div>
<label for="type">Transfer Type</label><br>
<div>
<label for="sSpot">
<input type="radio" name="type" id="sSpot" onclick="invisibleColors()"> SingleSpot
</label>
<label for="mSpot">
<input type="radio" name="type"id="mSpot" onclick="invisibleColors()"> MultiSpot
</label>
<label for="pSilk">
<input type="radio" name="type"id="pSilk" onclick="invisibleColors()"> PhotoSilk
</label>
</div>
</div>
Javascript part for hiding (by style.display = "none";) the divs which do not belong to the chosen product:
function invisibleColors() {
let sSpot = document.getElementsByName("type");
let singleSpotLB = document.getElementById("singleSpotLB");
let multiSpotLB = document.getElementById("multiSpotLB");
let photoSilkLB = document.getElementById("photoSilkLB");
if (sSpot[0].checked) {
document.getElementById('colorDiv').style.display = "none";
singleSpotLB.style.display = "block";
multiSpotLB.style.display = "none";
photoSilkLB.style.display = "none";
} else if (sSpot[1].checked) {
document.getElementById('colorDiv').style.display = "block";
singleSpotLB.style.display = "none";
multiSpotLB.style.display = "block";
photoSilkLB.style.display = "none";
} else if (sSpot[2].checked) {
document.getElementById('colorDiv').style.display = "none";
singleSpotLB.style.display = "none";
multiSpotLB.style.display = "none";
photoSilkLB.style.display = "block";
}
}
**The problem:
When I'm testing the code it works well at the beginning but after a couple of clicks the label texts change properly, but the images just don't load.
Thanks, and I hope someone could help.
P.S Content of the PHP files from where the LighBox is loaded:
<label for="type">SingleSpot</label>
<div class="masonry-thumbs grid-container grid-3 clearfix">
<a class="grid-item" href="http://ttransferhall.de/images/portfolio/4/1.jpg" data-lightbox="image">
<div class="grid-inner">
<img src="http://ttransferhall.de/images/portfolio/4/1.jpg" alt="Single Image">
<div class="bg-overlay">
<div class="bg-overlay-content dark">
<i class="icon-line-plus h4 mb-0" data-hover-animate="fadeIn"></i>
</div>
<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
</div>
</div>
</a>
</div>
Here is a video of the result
#Alexandar Dimov Your code in Html is owner than the code in javascript. add your style in other file CSS and try again.
I found that there is an ajax process loaded from the template, which conflicts with the plain JS script. Thank you all for your opinions and help.
I am trying to get content to disappear on button click and then show a new set of content on that button click. I cannot quite get this to work. I commented what each section is doing. The first section doesn't disappear on button click. The second section works as expected and does disappear on button click and the third section doesn't show up on button click. Helps is greatly appreciated and I look forward to learning from this!
I thought by adding a controller it would all function together.
HTML
<!-- THIS DOESN'T DISAPPEAR ON BUTTON CLICK -->
<div ng-controller="EventCtrl" ng-hide="eventComplete">
<h2>Example that doesn't disappear on button click</h2>
</div>
<!-- THIS WILL DISAPPEAR ON BUTTON CLICK -->
<div ng-controller="EventCtrl" ng-hide="eventComplete">
<div>
<h2>Example</h2>
<md-button ng-click="eventFinish();">Finish</md-button>
</div>
<!-- THIS DOESN'T SHOW ON BUTTON CLICK -->
<div ng-controller="EventCtrl" ng-show="eventComplete">
<h2>Complete!</h2>
</div>
</div>
ANGULAR
.controller('EventCtrl', function($rootScope,$state,$scope,$timeout){
var self = this;
$scope.eventComplete = false;
$scope.eventFinish=function(){
console.log('eventFinish'); //This logs
$scope.eventComplete = true;
};
})
You wrapped the div you want to hide around the div you want to show. The following html should solve the issue:
<div ng-controller="EventCtrl">
<div ng-hide="eventComplete">
<h2>Example that doesn't disappear on button click</h2>
</div>
<div ng-hide="eventComplete">
<div>
<h2>Example</h2>
<md-button ng-click="eventFinish();">Finish</md-button>
</div>
</div>
<div ng-show="eventComplete">
<h2>Complete!</h2>
</div>
</div>
EDIT: Found an issue in controller as well. You're missing the closing } for eventFinish :
.controller('EventCtrl', function($rootScope,$state,$scope,$timeout){
var self = this;
$scope.eventComplete = false;
$scope.eventFinish = function() {
console.log('eventFinish');
$scope.eventComplete = true;
};
})
Try to avoid placing same controller inside each other. That will only lead to problems. Instead use Components.
But if you insist on using controllers you could solve it this way. (Code not tested)
HTML
<div ng-controller="EventCtrl">
<div ng-if="showExample(1)">
<h2>Example 1</h2>
<md-button ng-click="onClickExample(2);">Finish</md-button>
</div>
<div ng-if="showExample(2)">>
<h2>Example 2</h2>
<md-button ng-click="onClickExample(1);">Finish</md-button>
</div>
</div>
JS
.controller('EventCtrl', function($rootScope,$state,$scope,$timeout){
$scope.currentExample=1;
$scope.showExample = function(id){
return $scope.currentExample === id;
}
$scope.onClickExample = function(id){
$scope.currentExample = id;
}
});
I'm using angularjs at my old website. And I have a problem with getting ng-if to work with multiple controls.
I have 2 icons, when I press icon A then user control A shows, when I press icon B, user control B doesn't show up.
It works if I change the order of the divs (so that user control B) is the first, but then user control A wont work. So the second one never does...
I tried remove the div containing user control A, and then user control B shows up.
I have validated so that all the booleans are correct.
I have debugged and can see that vm.showControlBisVisible is true, and I can see that the showControlAreaVisible shows up, but not the ascx file.
And last, the User Controls have exactly the same code, except for a different -tag.
EDIT: If I remove the ng-if attribute and put for example ng-if="true" then it works. Could it be that the scope doesnt update the value in the DOM or something like that? If I just write out {{vm.showControlBisVisible}} I get true.
My .aspx:
<%# Register Src="~/MyPage/UserControls/UserControlA.ascx" TagPrefix="MyPage" TagName="ControlA" %>
<%# Register Src="~/MyPage/UserControls/UserControlB.ascx" TagPrefix="MyPage" TagName="ControlB" %>
<asp:Content ContentPlaceHolderID="cphMainRegion" runat="server">
<div ng-controller="MyController as vm">
<section>
<div class="row">
<div class="small-12 columns">
<div class="row">
<div class="small-6 columns text-center">
<a ng-click="vm.showControlA()">
<span class="sprite">
<ng-include src="'/MyPage/Assets/svg/icon-A.svg'"></ng-include>
</span>
</a>
</div>
<div class="small-6 columns text-center">
<a ng-click="vm.showControlB()">
<span class="sprite">
<ng-include src="'/MyPage/Assets/svg/icon-B.svg'"></ng-include>
</span>
</a>
</div>
</div>
</div>
</div>
</section>
<section class="section--content section--gray" id="content-area" ng-show="vm.showControlAreaVisible">
<div ng-if="vm.controlAisVisible">
<MyPage:ControlA runat="server" />
</div>
<div ng-if="vm.controlBisVisible">
<MyPage:ControlB runat="server" />
</div>
</section>
</div>
</asp:Content>
My controller:
(function () {
'use strict';
angular
.module('myApp')
.controller('MyController', MyController);
MyController.$inject = ['$scope'];
function MyController($scope) {
var vm = this;
vm.showControlAreaVisible = false;
vm.controlAisVisible = false;
vm.controlBisVisible = false;
vm.showControlA = showControlA;
vm.showControlB = showControlB;
function showControlA() {
vm.controlBisVisible = false;
vm.showControlAreaVisible = true;
vm.controlAisVisible = true;
}
function showControlB() {
vm.controlAisVisible = false;
vm.showControlAreaVisible = true;
vm.controlBisVisible = true;
}
}
})();
I am stuck in this problem where I have a div tag which updates and shows a list of images. I want to add animation when the value in the div tag is updated in the transition from one set of images to another.
Here as you can see in the bottom there are a set of images for girl's hair. And when the user goes to other tab, a different set of images comes. I want animation in that transition.
The AngularJS part for the transition is as follows :
<div ng-swipe-left="avDesignController.onSwipeLeftAction()" ng-swipe-right="avDesignController.onSwipeRightAction()">
<!-- CUSTOMIZABLE TAB BAR -->
<div class="tab-bar-container" >
<div class="scrollmenutab">
<!-- CUSTOMIZABLE MENU -->
<div ng-repeat="customizable in customizables"
ng-click="avDesignController.onCustomizableClicked($event)"
style="display: inline;">
<a ng-if="customizable.allowed == 1">
<div ng-class="{selected: $index==currentIndex}">
<div ng-if="customizable.name == 'Hair'">
<img class="scrollmenutab-icon"
id="{{customizable.name}}-{{$index}}"
src="/app/app_resources/icons/{{genderImage}}Hair.png">
</div>
<div ng-if="customizable.name != 'Hair'">
<img class="scrollmenutab-icon"
id="{{customizable.name}}-{{$index}}"
src="/app/app_resources/icons/{{customizable.name}}.png">
</div>
</div>
</a>
</div> <!-- MENU : END -->
</div>
</div>
<!-- CUSTOMIZABLES -->
<div class="avdesign-item-container" id="avdesign-item-container">
<div id="four-columns" class="grid-container" >
<!-- LOAD CUSTOMIZABLES IF NOT LAST ITEM IN TAB -->
<ul ng-if="currentIndex < (customizables.length - 1)"
class="rig columns-4">
<li ng-repeat="customizableItem in currentCustomizable.customizable_item">
<img class="tab-icon"
src="/app/app_resources/resources/av/{{avatarInfo.name}}/as/{{customizableItem.as}}"
id="customizable-{{$index}}"
ng-click="avDesignController.onCustomizedItemClicked($event)"
ng-class="{highlight: customizableItem.id==currentID}">
</li>
</ul>
<!-- LOAD OUTFITS (FROM avatarOutfit) IF LAST ITEM IN TAB -->
<ul ng-if="currentIndex == (customizables.length - 1)"
class="rig columns-outfit">
<div ng-repeat="brand in outfitBrand" ng-style="{'margin-bottom':'1vh'}">
<div class="brand-icon" >
<img src="/app/app_resources/icons/{{brand.bg_image}}">
</div>
<li ng-repeat="outfit in brand.outfitList">
<img class="outfit-icon"
src="/app/app_resources/resources/av/{{avatarInfo.name}}/as/{{outfit.as}}"
id="outfit-{{$index}}"
ng-click="avDesignController.onOutfitItemClicked($event,$parent.$index)"
ng-class="{highlightOutfit: $index==avatar.outfit_index && $parent.$index==indexParent}">
</li>
</div>
</ul>
</div>
</div>
</div>
Where the functions being called in the JS part is updating accordingly the images.
So Question being how to add transition animation for the same element when it is updated because we are never leaving or entering that element tag
Your question is answered here
Html
<div ng-controller="c">
<div id={{my_id}} width={{widthOfOutsideWrapper}} height={{heightOfOutsideWrapper}}>
<img ng-src="{{src}}" imageonload />
</div>
</div>
and in controller
var app = angular.module('app', []);
app.directive('imageonload', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('load', function() {
alert('image is loaded');
scope.widthOfOutsideWrapper= this.width;
scope.heightOfOutsideWrapper= this.height;
scope.my_id = "testing";
});
}
};
});
app.controller('c', function($scope) {
$scope.src ="https://www.google.com.ua/images/srpr/logo4w.png";
});
and http://jsfiddle.net/2CsfZ/855/ working example is available here
The above answer is very helpful and might be of a great help for many.
But the answer to my question is you simply can't. ngAnimate's ngEnter and ngLeave will not able to recognize a change unless the element is changed and not what is inside the element.
So either some hack needs to be applied like using ngRepeat with different id's for different updation that happens to the element or something else needs to be done.