In this plunk I have a div that should move from left to right in a transition when the user clicks on the checkbox. Instead, the div just hides and shows in the new position. How to achieve the transition effect in Angular?
HTML:
Move <input type="checkbox" ng-model="checked" />
<div class="panel" ng-class="{ 'class1' : checked, 'class2' : !checked }"></div>
CSS:
.panel{
position: fixed;
background:orange;
width:100px;
height:30px;
top: 10px;
}
.class1{
left: 80px;
}
.class2{
left: 240px;
}
.class1.ng-show-add-active, .class1.ng-show-remove-active {
transition: all ease-in-out 2s;
}
.class2.ng-show-add-active, .class2.ng-show-remove-active {
transition: all ease-in-out 2s;
}
Javascript:
var app = angular.module("app", ['ngAnimate']);
app.controller('ctl', function($scope) {
$scope.checked = true;
});
This is the answer: you need to use -add and -remove after the class name.
PLUNK
Related
I want to show a pop up window when a user selects an element from the dropdown list. But instead im getting a plain text no modal window is being shown. Please help: below is the referece for my code-
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.value = '';
$scope.accntDetails = {
accnt01: { bankName: "HDFC", bankbranch: "delhi", accntNumber: "12345" },
accnt02: { bankName: "ICICI", bankbranch: "mumbai", accntNumber: "12346" },
accnt03: { bankName: "IDBI", bankbranch: "pune", accntNumber: "12347" }
};
$scope.modalShown = false;
$scope.toggleModal = function() {
$scope.modalShown = true;
};
$scope.changedValue = function(bank) {
$scope.value = bank.bankName;
$scope.toggleModal();
console.log($scope.value);
}
angular.module('myApp').directive('modalDialog', function() {
return {
restrict: 'E',
scope: {
show: '='
},
transclude: true,
link: function(scope, element, attrs) {
console.log('attrs: ', attrs);
scope.dialogStyle = {};
if (attrs.boxWidth) {
scope.dialogStyle.width = attrs.boxWidth;
}
if (attrs.boxHeight) {
scope.dialogStyle.height = attrs.boxHeight;
}
scope.hideModal = function() {
scope.modalShown = false;
};
},
template: `<div class='ng-modal' ng-show='modalShown'>
<div class='ng-modal-overlay' ng-click='hideModal()'></div>
<div class='ng-modal-dialog' ng-style='dialogStyle'>
<div class='ng-modal-close' ng-click='hideModal()'>X</div>
<div class='ng-modal-dialog-content' ng-transclude></div>
</div>
</div>`
};
});
});
/* Custom CSS- this is the css code for showing up a modal */
.ng-modal-overlay {
/* A dark translucent div that covers the whole screen */
position: absolute;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #808080;
opacity: 0.8;
}
.ng-modal-dialog {
background-color: #fff;
box-shadow: 10px 10px #595554;
border-radius: 4px;
z-index: 10000;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.ng-modal-dialog-content {
padding: 10px;
text-align: left;
}
.ng-modal-close {
position: absolute;
top: 3px;
right: 5px;
padding: 5px;
cursor: pointer;
font-size: 120%;
display: inline-block;
font-weight: bold;
font-family: 'arial', 'sans-serif';
}
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Select account number:</p>
<!-- <select ng-model="accnt" ng-options="y.bankName for (x, y) in accntDetails">
</select> -->
<select ng-model="bankSelected" ng-change=" toggleModal();"
data-ng-options="bank as bank.bankName for bank in accntDetails">
<option value="">Select Account</option>
</select>
<h1>You selected: {{bankSelected.bankName}}</h1>
<h2>branch: {{bankSelected.bankbranch}}</h2>
<h3>Number: {{bankSelected.accntNumber}}</h3>
<div ng-show="modalShown">
<modal-dialog box-width="400px" box-height="150px">
<div class="row">
<div class="col-md-12">
<h3>Header</h3>
<hr style="border-top:1px solid darkblue" />
</div>
</div>
<div class="row">
<div class="col-md-12">
This is an important message
</div>
</div>
</modal-dialog>
</div>
</div>
</body>
when a user click on any element of the list a modal window should popup. I have tried this code. If i use it onClick event it works fine the modal opens but if i use it with ng-select it doesnt works:
Okay, I think there are two problems here. One is that your JSON is not valid to run on a repeat. It should be an array of Object to get the details. I was able to run the same when I tried that with the JSON as :
CODEPEN
like accntDetails = [{BankDetails1},{BankDetails2},{BankDetails}]
hi i am trying to validate custom checkbox but it is not working. what i want to acquire when the checkbox is unchecked and i submit the data by clicking on send button there will show a error message, like other fields. and when i checked the checkbox the error message should be disappear...
here is the code Link https://jsfiddle.net/epn9s55x/
Html
<div class="form-row">
<div class="privacy-container">
<input type="checkbox" id="check1">
<label class="privacy-text" for="check1">If you are bussiness to bussiness (B2B) customer,tick the box</label>
</div>
<div class="privacy-container sumsung-privacy">
<input type="checkbox" id="check2">
<label class="privacy-text" for="check2">I acknowladge my information will be processed in accordance with the Sumsung Privacy Policy</label>
</div>
</div>
js
var myApp = angular.module('myApp', []);
myApp.directive('match', function($parse) {
return {
require: 'ngModel',
link: function(scope, elem, attrs, ctrl) {
scope.$watch(function() {
return $parse(attrs.match)(scope) === ctrl.$modelValue;
}, function(currentValue) {
console.log("mismatched directive");
ctrl.$setValidity('mismatch', currentValue);
});
}
};
});
myApp.controller("myController", ['$scope', '$location','$anchorScroll',function($scope,$location, $anchorScroll){
$scope.showMsgs = false;
$scope.send = function(form){
if ($scope[form].$valid) {
$scope.showMsgs = false;
} else {
$scope.showMsgs = true;
$location.hash('mainContainer');
$anchorScroll();
}
}
}]);
Css
/*css for check box*/
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
position: relative;
padding-left: 2.75em;
cursor: pointer;
min-width: 300px;
width: 95%;
box-sizing: border-box;
font-size: 14px;
display: block;
font-weight: bold
}
/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 1.35em;
height: 1.35em;
border: 2px solid #000;
background: #fff;
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
content: "";
position: absolute;
top: .18em;
left: .18em;
font-size: 1.3em;
line-height: 0.8;
color: #09ad7e;
width: .86em;
height: .86em;
background: #000;
transition: all .2s;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
/*End of css of check boxes*/
You could just put a model on your checkbox and and test for the value:
<input type="checkbox" id="check2" ng-model="checkbox2">
<label class="privacy-text" for="check2">I acknowladge my information will be processed in accordance with the Sumsung Privacy Policy</label>
</div>
</div>
<div ng-show="!checkbox2">
This is required
</div>
Here is an update to your fiddle
Here's an update per your comment:
You can still use ng-model to do that. Just use a different $scope variable like this:
In your HTML:
<div ng-show="checkInvalid">
This is required
</div>
In your Controller on your click event:
$scope.checkInvalid = true;
Here is an updated Fiddle. Happy coding!
I am building an Angular application that uses uib-typeahead and I am having trouble using the loading attribute. I would like to show a spinner while the typeahead is searching through a large dataset. Here is my code:
<input id="value"
class="form-control input-sm" type="text"
ng-model="filter"
uib-typeahead="option.value for option in values | filter:$viewValue | limitTo:1500"
placeholder="Select a value"
typeahead-loading="is_Loading"
typeahead-min-length="0"
typeahead-editable="true">
<span ng-if="is_Loading" id="myDiv"><img src="lib/images/ajax-spinner-large.gif" class="ajax-loader"/></span>
No image is showing when I am typing in the text box. Should I be assigning a $scope variable to is_Loading?
Handle it using ng-style
Try this
<!DOCTYPE html>
<html lang="en" ng-app="filterApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<style type="text/css">
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<body ng-controller="tableController">
<button ng-show="showLoading" ng-click="changeLoading()"> hide Loading</button>
<button ng-show="!showLoading" ng-click="changeLoading()">show Loading</button>
<div class="loader" ng-style={display:loaderStyle}></div>
<script>
var app = angular.module('filterApp',[]);
app.controller('tableController',function($scope){
$scope.showLoading = true;
$scope.loaderStyle = 'block';
$scope.changeLoading = function(){
$scope.showLoading = !$scope.showLoading;
if ($scope.showLoading) {
$scope.loaderStyle = 'block';
}else{
$scope.loaderStyle = 'none';
}
}
});
</script>
</body>
</html>
You can keep small span with image at bottom of your typeahead (or wherever you want) and add class ng-show="loader" then create $scope.loader and when you hit request make it true and on success make $scope.loader = false.
I'm trying to create a Spinner,
I have a custom directive in AngularJS
var app = angular.module('plunker', [])
.directive('spinner', function() {
return {
restrict: 'EA',
scope: {
jump:'=jump'
},
link: function (scope, element, attrs) {
scope.jump = 0;
scope.spinning = function(action) {
var jumps = document.getElementById("jumps").value;
var spinn = document.getElementById("spinn").innerText;
var convt = Number(spinn);
var jumpconvt = Number(jumps);
if(jumps === '' && action === "add") {
convt= convt +1;
}
else if(jumps === '' && action === "sub") {
convt= convt - 1;
}
else if(jumps !== '' && action === "sub") {
convt = convt - Number(jumps);
}
else{
convt = jumpconvt + convt;
}
document.getElementById("spinn").innerHTML = convt;
};
},
templateUrl: 'spinnerDirective.html'
};
});
in spinnerDirective.html will contain
<div>
<div> Jumps: <input type='text' id="jumps" ng-model='count'/> </div>
<div style="float: left; width:120px; margin-top:10px;" >
<div style="border-color: red; border-style: solid; border-width: 1px 1px 1px 1px; margin-left: 10px; text-align: center; height: 30px; line-height: 2px;" >
<label style="vertical-align: top;line-height: normal;" ng-click="spinning('add');" >+</label>
</div>
<div style="margin-top: -12px; text-align: center; height:12px;margin-left: 7px;">
<span id="spinn" style="background-color: #fff;font-size:18px;">{{jump}}</span>
</div>
<div style="border-color: red; border-style: solid; border-width: 0 1px 1px 1px; margin-left: 10px; text-align: center; height: 30px;line-height: 27px;">
<label style="vertical-align: bottom;line-height: normal;" ng-click="spinning('sub');">-</label>
</div>
</div>
</div>
Which will be rendered as:
<div>
<div>Spinner</div>
<div style="float: left;">
<spinner jump="jump"></spinner>
</div>
<div style="float: left;">
<spinner jump="jump"></spinner>
</div>
</div>
The problem is: if I use one spinner it works fine. But When I have multiple spinners it's not working, when i do click on + or - button in 2nd spinner, count is getting change in 1st spinner.
Result should be: onlick on + or - without giving any value in textbox, value should get increment or decrement by 1, and by giving value in textbox should get add or substract by textbox value.
when i do click on + or - button on 1st Spinner changes should happen only in 1st spinner and when i do click on + or - button on 2nd Spinner changes should happen only in 2nd spinner.
I have tried isolated scope in directive but still no effect.
Here's my code (Edit): Plunker
Please if someone could guide me how to do it right.
Thanks in advance.
I have a list of items (divs) and when I click on any of them I need them to move (with animation) to the top of the list.
However, move animation is not working for me.
HTML code:
<body ng-controller="myCtrl">
<div ng-init="items=[1,2,3,4,5,6,7,8,9]">
<div data-ng-repeat="item in items track by $index"
ng-click="move2Top($index)"
class="my-repeat-animation boxy">
{{item}}
</div>
</div>
</body>
Javascript controller (contains an Array prototype method for pushing array element to top of array)
var myApp = angular.module("MyApp", ["ngAnimate"]);
myApp.controller('myCtrl', function($scope){
$scope.move2Top = function (idx) {
console.log('moving element ' + idx);
if (idx > 0)
$scope.items.moveToTop(idx);
};
Array.prototype.moveToTop = function(from) {
this.splice(0, 0, this.splice(from, 1)[0]);
};
});
And the CSS:
.my-repeat-animation.ng-enter,
.my-repeat-animation.ng-leave,
.my-repeat-animation.ng-move {
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
position:relative;
}
.my-repeat-animation.ng-enter {
left:-10px;
opacity:0;
}
.my-repeat-animation.ng-enter.ng-enter-active {
left:0;
opacity:1;
}
.my-repeat-animation.ng-leave {
left:0;
opacity:1;
}
.my-repeat-animation.ng-leave.ng-leave-active {
left:-10px;
opacity:0;
}
.my-repeat-animation.ng-move {
opacity:0.5;
}
.my-repeat-animation.ng-move.ng-move-active {
opacity:1;
}
.boxy {
border: solid 1px;
margin: 3px;
padding: 3px;
border-radius: 4px;
width: 30px;
text-align: center;
}
Please take a look at the example:
http://plnkr.co/edit/asHtC5WOt9qnePyzPqk5?p=preview
Animated move simply doesn't work.
Maybe you can refer to this question on stack. This is possibly similar what you are trying to achieve.
Animating ng-move in AngularJS ngRepeat is animating the wrong items
It is not complete but it might give you some idea or lead you in right direction.
I think that this has to do with your Array.prototype function.
If you do the splicing in $scope.move2Top it works, at least in my example.
var myApp = angular.module("MyApp", ["ngAnimate"]);
myApp.controller('myCtrl', function($scope){
$scope.move2Top = function (idx) {
console.log('moving element ' + idx);
if (idx > 0)
$scope.items.splice(0, 0, $scope.items.splice(idx, 1)[0]);
};
});
http://plnkr.co/edit/H5UpIZoqIMnJofz0mndL?p=preview