Can i know how to get value from toggle button in angularjs. I need to get value as Principle or contractor.
<div style="float: left; margin-top: 4px">Principal</div>
<div style="margin-left: 10px; float: left; margin-right: 10px"
class="btn-switch"
ng-class="{'btn-switch--on':toggle.switch}"
ng-model="toggle.switch"
ng-click="toggle.switch = !toggle.switch">
<div class="btn-switch-circle"
ng-class="{'btn-switch-circle--on':toggle.switch}"
ng-model="toggle.switch"
ng-click="!toggle.switch = toggle.switch"></div>
</div>
<div style="float: left; margin-top: 4px">Contractor</div>
can you check like this..?
var result;
if(!toggle.switch){
result = 'Contractor'
}
else{
result = 'Principal'
}
Related
I am trying to control a video player via videojs with in my ionic app. The code I have inside of my controller is:
$scope.$on('$ionicView.loaded', function() {
console.log('view loaded!!!');
if ($scope.post.media.length > 0) {
var myPlayer = null;
for (var i = 0; i < $scope.post.media.length; i++) {
videojs("bc-video-0").ready(function () {
myPlayer = this;
});
myPlayer.on('loadstart', function () {
console.log('well something happened');
})
}
}
});
where I use the life cycle event $ionicView.loaded to wait for all of the template code to be loaded onto the page. Then in my template file I have:
<div ng-repeat = "video in post.media | limitTo:videoLimit" class="video-box">
<!--limitTo:videoLimit |-->
<h3 class="video-title">{{video.title}}</h3>
<p ng-bind-html = "video.info"></p>
<!-- BRIGHTCOVE -->
<div style="display: block; position: relative; width: 100%;" >
<div style="display: block; position: relative; width: 100%;">
<div style="display: block; padding-top: 56.25%;" data-tap-disable="true">
<video
id="{{'bc-video-' + $index}}"
style="width: 100%; height: 100%; position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px;"
data-video-id=" {{video.file}}"
data-account="XXXXXXXXXX"
data-player="XXXXXXXXXX"
data-embed="default"
class="video-js"
controls="">
<source ng-src = "{{video.src | trusted}}">
</video>
</div>
</div>
</div>
<p style="display: none;">source: {{video.src}}</p>
</div>
but I keep getting the error:
TypeError: The element or ID supplied is not valid. (videojs)
When I inspect I see that the first video id is indeed bc-video-0, any idea on what I am missing?
Try enclosing your script inside the $timeout(). had the same issue.
Initializing player in ngAfterViewInit solved the issue for me
ngAfterViewInit() {
this.player = this.initPlayer(this.config, this.pid);
}
I want to change label color and cursor type based on ng-model
index.html
<button ng-click="changeType()">Change</button>
<label class="fee-type" ng-style="feeType ==='one' && {'class':'disabled-class'}" for="fixed2">Client Contengency Fee</label>
<label class="fee-type" ng-style="feeType ==='one' && {'class':'disabled-class'}" for="fixed1">Fixed Fee Per Property</label>
The default class is fee-type but when then button get clicked its class should change to disabled-class
index.css
.fee-type {
float: left;
clear: none;
display: block;
padding: 2px 1em 0 0;
color: black;
}
.disabled-class {
color:gray;
cursor: not-allowed;
}
index.js
$scope.feeType= two;
$scope.changeType= function(){
$scope.feeType=one;
}
You should use ng-class instead of ng-style and add condition in ng-class to apply css class in your label.
HTML:
<button ng-click="changeType()">Change</button>
<label class="fee-type" ng-class="{'disabled-class':feeType ==='one'}" for="fixed2">Client Contengency Fee</label>
<label class="fee-type" ng-class="{'disabled-class':feeType ==='two'}" for="fixed1">Fixed Fee Per Property</label>
and controller
$scope.feeType = 'two';
$scope.changeType = function() {
$scope.feeType = 'one';
};
I have a rectangular box that can call modal when clicked. Inside the box are labels and an expand icon.
<div class="clickable-box" ng-click="openRetailerGraphDetails()" data-toggle="modal" data-target="#g-retailer-purchases-graph">
<div class="dashboardBox clearfix">
<div class="pull-left dashboardBoxLabel purchases">
<h4 class="dashboardBoxLabeltext">
{{RetailerPurchases}} RETAILER PURCHASES
</h4>
<span class="dashboardBoxLabel2">
For the current month
</span>
</div>
<img class="pull-right expand-icon" src="themes/img/dashboard/expand.svg" />
</div>
</div>
I want to change the opacity of the expand icon inside img tag from 0 to 0.7 when the whole clickable box is hovered. How can I achieve it?
Edit: Here`s the css
.clickable-box {
cursor: pointer;
}
#dashboard .expand-icon {
width: 20px;
margin-top: 13px;
margin-right: -10px;
margin-bottom: -25px;
opacity: 0;
}
You can use the :hover pseudo class:
#dashboard .clickable-box:hover img.expand-icon {
opacity: 0.7;
}
.clickable-box:hover img {
opacity: 0.7;
}
img.pull-right.expand-icon:hover {
opacity: 0.7;
}
CODEPEN DEMO
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.
In my angular.js learning project I want to hide one div and show another when I click a button.
In this code, I'd like the first div to be hidden at the click (or even destroyed?) and the second div to be shown.
Basically I want the user experience of going from page 1 to page 2 in my app.
How do I make this happen?
Index.html
<ion-content ng-controller="StartpageCtrl">
<div class="list card" id="startCard" ng-show="showstartCard">
<div class="item item-image item item-text-wrap">
Card 1
</div>
</div>
<div class="list card" id="secondCard" ng-show="showsecondCard">
<div class="item item-image item item-text-wrap">
Card 2
</div>
</div>
<button ng-click="hideCard()" class="button button-full button-calm button icon-right ion-chevron-right">
Start now
</button>
</ion-content>
controllers.js
.controller("StartpageCtrl", funcion($scope){
$scope.showstartCard = true;
$scope.showsecondCard = false;
$scope.hideCard = function() {
$scope.showstartCard = false;
$scope.showsecondCard = true;
};
});
When I run the page I see "Card 2" and nothing happens when I click the button.
What I wanted to see was "Card 1" and for it to switch to "Card 2" as I click the button...
Solved
I had forgotten to add references to controllers.js in the app.js angular.module as well as the script tag in index.html. It works fine now.
Using angular:
HTML file:
<td>Source Doc..
<div id="mydiv" ng-show="showDetails">
<div id="mydiv-container">
<div id="mydiv-content">
Close
<br>
hello
</div>
</div>
</div>
</td>
css file:
body {
height: 100%;
background-color: #F0F0F0;
font-family: Arial, sans-serif;
}
#mydiv {
width: 100%;
height: 100%;
overflow: hidden;
left: 100px;
top: 150px;
position: absolute;
opacity: 0.95;
}
#mydiv-container {
margin-left: auto;
margin-right: auto;
}
#mydiv-content {
width: 70%;
padding: 20px;
background-color: white;
border: 1px solid #6089F7;
}
a {
color: #5874BF;
text-decoration: none;
}
a:hover {
color: #112763;
}
If you are looking for toggle, then this code might help as there is no need to have any extra CSS or JS functions needed.
<button ng-click="isDetailOpen = !isDetailOpen"
ng-class="!isDetailOpen ? 'ion-ios-arrow-down' : 'ion-ios-arrow-up'"
class="button button-clear button-positive icon-right">
<span ng-show="!isDetailOpen">More Detail</span>
<span ng-show="isDetailOpen">Less Detail</span>
</button>
<div ng-show="isDetailOpen">
<p>Per ad ferri dicta, omnis laudem dicunt duo an. Ex pri solum definitiones.</p>
</div>
I figured it out while working on Angular-Ionic project.