I'm new in Angular, so maybe I missing something. Does anybody know, what's wrong with expression state in such case:
The value 'isDisable.state' change in 'p' tag, but not in 'ng-disabled'. The button doesn't change it state to disabled.
Here is the plunk:http://plnkr.co/edit/zc8k9oCUxlMRCkZKjQa5?p=preview
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example53-production</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js"></script>
<script type="text/javascript">
var myapp = angular.module('switcher',[]);
myapp.controller('switchState', function ($scope) {
$scope.isDisable = {'state':false};
$scope.toggle = function () {
$scope.isDisable.state = !$scope.isDisable.state;
}
});
</script>
</head>
<body ng-app="switcher">
<div ng-controller="switchState">
<button ng-click="toggle()">toggle</button>
<button ng-disabled="{{isDisable.state}}">Disabled</button>
<p>{{isDisable.state}}</p>
</div>
</body>
</html>
Remove the {{}}
ng-disabled="isDisable.state"
Related
I'm using Divi and I can't seem to update the email that shows up in the topbar in the header on the Spanish version of the site. My JS is a little rusty.
The URL is domainofclient.com/es/inicio
The element is <span id="et-info-email">sales#domainofclient.com</span> which needs to change to <span id="et-info-email">ventas#domainofclient.com</span>
What I've tried
<script type="text/javascript">
if(document.URL.indexOf("/es/inicio/") >= 0){
document.getElementById('et-info-email').innerHTML = 'ventas#domainofclient.com'
}
</script>
I've also tried the following JQ
<script type="text/javascript">
if(window.location.href === "https://domainofclient.com/es/inicio/") {
jQuery('#et-info-email').text('ventas#domainofclient.com');
}
</script>
You are almost there. I would although try to first of all wrap the code into a function and run it only when the page is ready.
function replaceEmail() {
if(document.location.pathname.indexOf("/es/inicio") !== -1){
document.getElementById("et-info-email").innerHTML = "ventas#domainofclient.com"
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Author">
<title>#[[$Title$]]#</title>
</head>
<body onload="replaceEmail()">
<span id="et-info-email">sales#domainofclient.com</span>
</body>
</html>
I figured it out!
<script type="text/javascript">
jQuery(document).ready(function() {
if(window.location.href === "https://domainofclient.com/es/inicio/") {
jQuery('#et-info-email').text('ventas#domainofclient.com');
}
});
</script>
I'm trying to create a very simple ng-href page in AngularJS but it is not working and I cannot understand why.
<!DOCTYPE html>
<html ng-app="href">
<head>
<title>ngHref</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-controller="ngh">
<div>
<p>Go to<a ng-href="{{base}}">{{base}}</a></p>
</div>
<script>
var a = angular.module('href', [])
a.controller('ngh', function() {
this.base = 'www.google.com';
});
</script>
</body>
</html>
You should use $scope to bind something to DOM. If you want use something with this. you should do something like:
HTML
<body ng-controller="ngh as vm">
JS
var a = angular.module('href', [])
a.controller('ngh', function() {
var vm = this;
vm.base = 'www.google.com'; // or this.base
});
<!DOCTYPE html>
<html ng-app="href">
<head>
<title>ngHref</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-controller="ngh">
<div>
<p>Go to<a ng-href="{{base}}">{{base}}</a></p>
</div>
<script>
var a = angular.module('href', [])
a.controller('ngh', function($scope) {
$scope.base = 'www.google.com';
});
</script>
</body>
</html>
I tried to create two buttons, so that when I click on each- I will get a pop up small window, with a content that it will get while onloading.
This is the code:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp">
<p ng-controller="ctrl">
<span ng-repeat="x in items">
<button ng-click="parentFunc(x.fieldOne,x.fieldTwo)">{{x.fieldOne}}</button>
<br><br>
</span>
</p>
<script>items();</script>
</body>
</html>
script.js:
var title, content;
function items(){
angular.module('myApp', []).controller('ctrl', function($scope) {
$scope.items = [
{fieldOne:"field1", fieldTwo:"field1 content"},
{fieldOne:"field2", fieldTwo:"field2 content"}
];
$scope.parentFunc=function(titleTmp,contentTmp){
title=titleTmp;
content=contentTmp;
var OpenWindow = window.open('popUp.html','_blank','width=500, height=400');
return false;
}
});
}
function codeAddress() {
document.getElementById("title").innerHTML=title;
document.getElementById("content").innerHTML=content;
}
popUp.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="script.js"></script>
</head>
<body onload="codeAddress();">
<h1 id="title"></h1>
<div id="content"></div>
</body>
</html>
The new pop up window open as expected, but the h1 and div in it get undefined. I tried to debug it, and I saw that after the first two lines of parentFunc are executed, the global variables title and content get what I expect and they are not undefined. However, when the third line is executed and the new window get opened- the global variables are undefined.
Why the two global variables are undefined in the pop up window?
And how can I solve this?
Your method won't work : you are trying to reload the script.jsand then, the vars are reinitialized.
Add your vars in the URL :
var OpenWindow = window.open('popUp.html?title='+titleTmp+'&content='+contentTmp,'_blank','width=500, height=400');
Then, in your second page, read those parameters :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript">
function codeAddress(){
var title = GET_TITLE_FROM_PARAMETER;
var content = GET_CONTENT_FROM_PARAMETER;
document.getElementById("title").innerHTML=title;
document.getElementById("content").innerHTML=content;
}
</script>
</head>
<body onload="codeAddress();">
<h1 id="title"></h1>
<div id="content"></div>
</body>
</html>
And of course, remove codeAddress from the first page as it's useless.
FYI, to get the parameters values, please check this answer.
I'm messing around with JavaScript and I want to have a coloured square with 3 links and depending on the link I click, the square will change colours. I can't get it to work and I'm not sure where I went wrong..
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Page 2</title>
<script src="switch.js" type='text/javascript'></script>
</head>
<body>
<img id='square' src="img/blue.png"><br>
<a href="#" id='blue'>Blue!</a>
<a href='#' id='red'>Red!</a>
<a href='#' id='green'>Green!</a>
</body>
</html>
switch.js
var switch = (function() {
var red = document.body.getElementById('red');
var square = document.body.getElementById('square');
red.onclick = function() {
square.src = 'img/red.png';
}
})();
You're running your code before the elements exist.
Move the <script> element to the bottom of the <body> (so that it runs after they exist), or run the code in the load event.
You have two issues.
First you are using a variable called switch, that is a no no. Switch is a reserved word because it is a switch statement. Rename it.
var xswitch = (function() {
Second, It is because you are runnnig the code before the element exists on the page. It needs to be executed onload, document dom loaded [ready], or the script needs to be added at the bottom of the page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Page 2</title>
</head>
<body>
<img id='square' src="img/blue.png"><br>
<a href="#" id='blue'>Blue!</a>
<a href='#' id='red'>Red!</a>
<a href='#' id='green'>Green!</a>
<script src="switch.js" type='text/javascript'></script>
</body>
</html>
Make the following changes in order to ensure that the DOM has loaded.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Page 2</title>
<script src="switch.js" type='text/javascript'></script>
<script type="text/javascript">
window.onload = function () {
switchFn();
};
</script>
</head>
<body>
<img id='square' src="img/blue.png"><br>
<a href="#" id='blue'>Blue!</a>
<a href='#' id='red'>Red!</a>
<a href='#' id='green'>Green!</a>
</body>
</html>
JavaScript (switch.js)
var switchFn = function () {
var red = document.getElementById('red');
var square = document.getElementById('square');
red.onclick = function () {
square.src = 'img/red.png';
}
};
I am new to angular js. I am trying out an example from http://egghead.io/lessons/angularjs-directives-talking-to-controllers but somehow it does not seem to work correctly for me.
here is my html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="js/twitterApp.js"></script>
</head>
<body>
<div ng-app="twitterApp">
<div app-controller="AppCtrl">
<div enter="loadMoreTweets()">Roll over to load tweets.</div>
</div>
</div>
</body>
</html>
here is app, controller and directive
var tApp= angular.module("twitterApp",[])
tApp.controller("AppCtrl", function ($scope) {
$scope.loadMoreTweets = function () {
alert('Loading tweets.');
}
})
tApp.directive("enter", function () {
return function (scope, element, attrs) {
element.bind("mouseenter", function () {
scope.$apply(attrs.enter);
})
}
})
the problem is below statement seems to be failing and I can't figure out the reason since I did exactly the way it is done in demo.
scope.$apply(attrs.enter)
I even tried following but error console displays loadMoreTweets is not found, any help is greatly appreciated.
scope.loadMoreTweets()
<div app-controller="AppCtrl">
should be
<div ng-controller="AppCtrl">