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}]
Related
$index in md-chips do not update in AngularJS. How could I overcome this? I need to place a comma before every chip except for the chip with the $index 0.
You can see that the $index do no update over here, for instance.
On the screenshot above the index should be 0, while it is 2 after I removed the first two chips.
Here is the code.
template
<div ng-controller="BasicDemoCtrl as ctrl" layout="column" ng-cloak="" class="chipsdemoBasicUsage" ng-app="MyApp">
<md-content class="md-padding" layout="column">
<md-chips class="custom-chips" ng-model="ctrl.vegObjs" readonly="ctrl.readonly" md-transform-chip="ctrl.newVeg($chip)" md-removable="ctrl.removable" input-aria-label="Vegetables">
<md-chip-template>
<span>
<strong>[{{$index}}] {{$chip.name}}</strong>
<em>({{$chip.type}})</em>
</span>
</md-chip-template>
<button md-chip-remove="" class="md-primary vegetablechip" aria-label="Remove {{$chip.name}}">
<md-icon md-svg-icon="md-close"></md-icon>
</button>
</md-chips>
<br>
</md-content>
</div>
css
.chipsdemoBasicUsage .errors {
font-size: 12px;
color: #dd2c00;
margin-top: 10px; }
.chipsdemoBasicUsage .custom-chips md-chip {
position: relative; }
.chipsdemoBasicUsage .custom-chips md-chip .md-chip-remove-container {
position: absolute;
right: 4px;
top: 4px;
margin-right: 0;
height: 24px; }
.chipsdemoBasicUsage .custom-chips md-chip .md-chip-remove-container button.vegetablechip {
position: relative;
height: 24px;
width: 24px;
line-height: 30px;
text-align: center;
background: rgba(0, 0, 0, 0.3);
border-radius: 50%;
border: none;
box-shadow: none;
padding: 0;
margin: 0;
transition: background 0.15s linear;
display: block; }
.chipsdemoBasicUsage .custom-chips md-chip .md-chip-remove-container button.vegetablechip md-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0) scale(0.7);
color: white;
fill: white; }
.chipsdemoBasicUsage .custom-chips md-chip .md-chip-remove-container button.vegetablechip:hover, .chipsdemoBasicUsage .custom-chips md-chip .md-chip-remove-container button.vegetablechip:focus {
background: rgba(255, 0, 0, 0.8); }
.chipsdemoBasicUsage .custom-chips md-chips-wrap.md-removable md-chip md-chip-template {
padding-right: 5px; }
js
(function () {
'use strict';
angular
.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.config(['$mdIconProvider', function($mdIconProvider) {
$mdIconProvider.icon('md-close', 'img/icons/ic_close_24px.svg', 24);
}])
.controller('BasicDemoCtrl', DemoCtrl);
function DemoCtrl ($timeout, $q, $log) {
var self = this;
self.readonly = false;
// Lists of fruit names and Vegetable objects
self.fruitNames = ['Apple', 'Banana', 'Orange'];
self.ngChangeFruitNames = angular.copy(self.fruitNames);
self.roFruitNames = angular.copy(self.fruitNames);
self.editableFruitNames = angular.copy(self.fruitNames);
self.tags = [];
self.vegObjs = [
{
'name' : 'Broccoli',
'type' : 'Brassica'
},
{
'name' : 'Cabbage',
'type' : 'Brassica'
},
{
'name' : 'Carrot',
'type' : 'Umbelliferous'
}
];
self.newVeg = function(chip) {
return {
name: chip,
type: 'unknown'
};
};
self.onModelChange = function(newModel) {
$log.log('The model has changed to ' + newModel + '.');
};
}
})();
Here is the pen.
You can have custom function to get the index like below.
self.getIndex = function(chipName) {
for (var i = 0; i < self.vegObjs.length; i++) {
if (self.vegObjs[i].name === chipName) {
return i;
}
}
}
<md-chip-template>
<span>
<strong>[{{ctrl.getIndex($chip.name)}}] {{$chip.name}}</strong>
<em>({{$chip.type}})</em>
</span>
</md-chip-template>
code to create tabs component
Hi,I am learning angular component from this link ,the problem is when i tried to load from external files instead of template it throws following error
angular.js:13708 TypeError: Cannot set property 'selected' of undefined
at controller.selectTab (scr.js:47)
at controller.$postLink (scr.js:50)
at angular.js:9228
at forEach (angular.js:329)
at nodeLinkFn (angular.js:9225)
at compositeLinkFn (angular.js:8510)
at compositeLinkFn (angular.js:8513)
at compositeLinkFn (angular.js:8513)
at publicLinkFn (angular.js:8390)
at angular.js:1756
here is the scr.js code
var tab = {
bindings: {
label: '#'
},
require: {
tabs: '^^tabs'
},
transclude: true,
template:['$templateCache',function($templateCache){
return $templateCache.get('tab.html')
}
],
controller: function () {
this.$onInit = function () {
this.tab = {
label: this.label,
selected: false
};
this.tabs.addTab(this.tab);
};
}
};
var tabs = {
bindings: {
selected: '#'
},
transclude: true,
template:['$templateCache',function($templateCache){
return $templateCache.get('tab.html')
}
],
controller: function () {
this.$onInit = function () {
this.tabs = [];
};
this.addTab = function addTab(tab) {
this.tabs.push(tab);
};
this.selectTab = function selectTab(index) {
for (var i = 0; i < this.tabs.length; i++) {
this.tabs[i].selected = false;
}
this.tabs[index].selected = true;
};
this.$postLink = function () {
this.selectTab(this.selected);
console.log(this.selected)
};
},
};
angular
.module('app', [])
.component('tab', tab)
.component('tabs', tabs);
Here is html code:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script>
<script src="scr.js"></script>
<style>
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body {
font: 300 14px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
background: #111;
margin: 0;
padding: 0;
}
.tabs {
margin: 25px;
background: #fff;
}
.tabs__list {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
border-bottom: 1px solid #eee;
}
.tabs__list li {
float: left;
}
.tabs__list li a {
color: #444;
display: block;
text-decoration: none;
padding: 10px 20px;
}
.tabs__content {
padding: 10px;
}
</style>
</head>
<body>
<div ng-app="app">
<div>
<tabs selected="2">
<tab label="Tab 1">
Tab 1 contents!
</tab>
<tab label="Tab 2">
Tab 2 contents!
</tab>
<tab label="Tab 3">
Tab 3 contents!
</tab>
</tabs>
</div>
</div>
</body>
</html>
here are two template which i am trying to load in component tab.html and tabs.html respectively:
<div class="tabs__content" ng-if="$ctrl.tab.selected">
<div ng-transclude></div>
</div>
<div class="tabs">
<ul class="tabs__list">
<li ng-repeat="tab in $ctrl.tabs">
<a href=""
ng-bind="tab.label"
ng-click="$ctrl.selectTab($index);"></a>
</li>
</ul>
<div class="tabs__content" ng-transclude></div>
</div>
can any one please help me fix this,Thanks in advance
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'm using AngularJS v1.6.0-rc.2. I am making a modal-like chat box and I've found a major problem. I wonder why the message can't be pushed into an array when I clicked on a button 'Send' like this. I assume that the message is sent as "sender".
View
<html>
<head>
<!-- I've included the script, CSS file, and fonts -->
</head>
<body ng-app='ModalDemo'>
<div ng-controller='MyCtrl'>
<b ng-click='toggleModal()'><label>username</label></b>
<modal-dialog show='modalShown' width='250px' height='370px'>
<name>
<span>username</span>
</name><hr>
<content>
<div width=100% ng-repeat='message in messages'>
<div ng-if='message.u==1'><span class='sender'>{{message.m}}</span></div>
<div ng-if='message.u==0'><span class='receiver'>{{message.m}}</span></div>
</div><span class='sender'>{{textmsg}}</span>
</content>
</modal-dialog>
</div>
</body>
</html>
Model & Controller
<script>
var app = angular.module('ModalDemo',[]);
app.directive('modalDialog', function() {
return {
scope: {
show: true;
},
replace: true,
transclude: {
'name': '?name',
'content': '?content'
},
link: function(scope, element, attrs) {
scope.dialogStyle = {};
if (attrs.width)
scope.dialogStyle.width = attrs.width;
if (attrs.height)
scope.dialogStyle.height = attrs.height;
scope.hideModal = function() {
scope.show = false;
};
},
template: "<div class='ng-modal' ng-show='show'>\n\
<div class='ng-modal-overlay' ng-click='hideModal()'></div>\n\
<div class='ng-modal-dialog' ng-style='dialogStyle'>\n\
<div class='ng-modal-name' ng-transclude='name'></div>\n\
<div class='ng-modal-close' ng-click='hideModal()'>_</div>\n\
<div class='ng-modal-dialog-content' ng-transclude='content'></div>\n\
<div class='ng-modal-textbox'>\n\
<input class='textinput' ng-model='textmsg'>
<button ng-click='send()' class='send'>Send</button>\n\
</div></div></div>"
};
});
app.controller('MyCtrl', ['$scope', function($scope) {
$scope.modalShown = false;
$scope.toggleModal = function() {
$scope.modalShown = !$scope.modalShown;
};
$scope.messages=[
{'m':'hi','u':1},
{'m':'hello', 'u':1},
{'m':'is it username?', 'u':1},
{'m':'yeah!','u':0}];
$scope.send = function(){
$scope.messages.push(
{'m':$scope.textmsg, 'u':1 }
);
$scope.textmsg="";
};
}]);
</script>
Here is my CSS file if needed.
CSS
.ng-modal-overlay {
position:absolute;
z-index:9999;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000000;
opacity: 0.0;
}
.ng-modal-dialog {
z-index:10000;
position: fixed;
width: 50%;
bottom: 0px;
left: 75%;
box-shadow: 1px 1px 2px #000000;
background-color: #fff;
}
.ng-modal-dialog-content {
text-align: left;
overflow-y: scroll;
height: 300px;
width:100%;
}
.ng-modal-close {
position: absolute;
top: 3px;
right: 5px;
padding: 3px 6px;
cursor: pointer;
font-size: 120%;
display: inline-block;
font-weight: bold;
font-family: 'arial', 'sans-serif';
color: white;
}
.ng-modal-name{
background:#4A86E8;
padding:10px;
color: white;
}
.ng-modal-textbox{
width:100%;
height: 25px;
border-top: 1px solid black;
bottom:0px;
position:absolute;
}
.send{
background: #4a86e8;
border: 0;
font-size: 1em;
color: white;
float: right;
height:inherit;
font-family: 'Montserrat';
}
.textinput{
width: 185px;
font-size: 1em;
border: 0;
padding-left: 3px;
}
.sender{
float: right;
margin:8px;
padding: 5px 8px;
border-radius: 6px;
font-family: arial;
background: #8eb5f2;
box-shadow: 1px;
color: white;
font-size: 0.8em;
box-shadow: 1px 1px 6px #000;
max-width: 60%;
}
.receiver{
float:left;
margin:8px;
padding: 5px 8px;
border-radius: 6px;
font-family: arial;
box-shadow: 1px;
color: black;
font-size: 0.8em;
background: #eaebed;
box-shadow: -1px 1px 6px #000;
max-width: 60%;
}
Here is his working PLUNKER for his problem
I have fixed all the errors but ever thing is working fine.
Every thing goes fine,
You missed a lot of brackets here that messed your code.
return {
scope: {
show: true,
replace: true,
transclude: {
'name': '?name',
'content': '?content'
},
link: function(scope, element, attrs) {
scope.dialogStyle = {};
if (attrs.width)
scope.dialogStyle.width = attrs.width;
if (attrs.height)
scope.dialogStyle.height = attrs.height;
scope.hideModal = function() {
scope.show = false;
};
},
Also your push
var obj= {
'm':$scope.textmsg,
'u':1
}
$scope.messages.push(obj);
Please tell me one thing which the place your clicking to toggle in this HTML, Also do you think it is clickable?
<b ng-click="toggleModal()">
<label>username</label>
</b>
Im trying to build infinite image gallery in angular, but i dont know how to accomplish this. this is the codepen. i build image gallery but its not infinite.
someone can help me please?
<div data-ng-app="theApp" data-ng-controller="mainController">
<div class="main-shell clearfix">
<div class="view-window" ng-mouseenter="stopAutoSlide()" ng-mouseleave="startAutoSlide()">
<ul class="full-size-list list-unstyled" ng-style="listPosition" >
<li ng-repeat="image in galleryData track by $index">
<img ng-src="{{image}}" class="img-responsive"/>
</li>
</ul>
</div>
<div class="bullets clearfix">
<ul>
<li ng-repeat="image in galleryData track by $index" ng-class="{active: selected == image}">
<a ng-href="" ng-click="scrollTo(image,$index)">
{{$index}}
</a>
</li>
</ul>
</div>
</div>
.main-shell {
position: relative;
width:300px;
margin:100px;
ul{
padding:0;
margin:0;
width:10000px;
li {
list-style:none;
display:inline-block;
}
}
}
.view-window {
overflow: hidden;
position:relative;
}
.full-size-list{
position:relative;
transition: left .8s ease;
}
.bullets {
background: transparent;
width: 100%;
position: absolute;
bottom: 30px;
right: 15px;
width: 30%;
ul li {
border-radius:10px;
width:20px;
height: 20px;
background: #fff;
text-align: center;
margin-left: 0.3em;
cursor:pointer;
a {
color:#333;
&:hover {
text-decoration:none;
}
}
}
}
.bullets ul li.active {
background: #000;
a {
color:#fff;
}
}
var myApp = angular.module("theApp", []);
myApp.controller("mainController", ["$scope","$interval", function($scope, $interval){
$scope.galleryData = [
'http://placehold.it/300x300&text=1',
'http://placehold.it/300x300&text=2',
'http://placehold.it/300x300&text=3'
];
$scope.selected = $scope.galleryData[0];
var IMG_WIDTH = 300;
$scope.scrollTo = function(image,ind) {
$scope.listPosition = {left:(IMG_WIDTH * ind * -1) + "px"};
$scope.selected = image;
}
var i = 0;
var autoSlide = function() {
$scope.scrollTo($scope.galleryData[i], i);
if(i + 1 == $scope.galleryData.length) {
i = 0;
} else {
i++;
}
}
var autoSlideInterval = $interval(autoSlide ,2000);
$scope.startAutoSlide = function() {
autoSlideInterval = $interval(autoSlide ,5000);
}
$scope.stopAutoSlide = function() {
$interval.cancel(autoSlideInterval);
}
}]);
http://codepen.io/phpnetanel/pen/DnwJK