Here in this code i have used two dynamic variables fbid and fburl. fburl is a expression using fbid.
$scope.fburl = "https://graph.facebook.com/"+$scope.fbid+"/picture?type=normal";
Here is my code.
// Code goes here
angular.module("testApp", [])
.controller("testCtrl", function($scope) {
$scope.fbid = "bennadel";
$scope.fburl = "https://graph.facebook.com/"+$scope.fbid+"/picture?type=normal";
console.log($scope.fburl);
})
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="testCtrl">
FacebookID<input type="text" ng-model="fbid" >
<img ng-src= "{{fburl}}"/>
<div>{{fburl}}</div>
</body>
</html>
Now my question is when I am updating the fbid why fburl is not updating automatically ?
It's because the value can't update after the fact, you need to add a watcher on the variable fbid.
AngularJS docuemntation for $watch
// Code goes here
angular.module("testApp", [])
.controller("testCtrl", function($scope) {
$scope.fbid = "bennadel";
$scope.fburl = "";
$scope.$watch('fbid ', function(newValue, oldValue) {
$scope.fburl = "https://graph.facebook.com/"+newValue+"/picture?type=normal";
console.log($scope.fburl);
});
})
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="testCtrl">
FacebookID<input type="text" ng-model="fbid" >
<img ng-src= "{{fburl}}"/>
<div ng-bind="fburl"></div>
</body>
</html>
Alternate solution - cleaner way.
// Code goes here
angular.module("testApp", [])
.controller("testCtrl", function($scope) {
$scope.fbid = "bennadel";
$scope.fbFn = function() {
return "https://graph.facebook.com/"+$scope.fbid+"/picture?type=normal";
};
})
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="testCtrl">
FacebookID<input type="text" ng-model="fbid" >
<img ng-src= "{{fbFn()}}"/>
<div >{{fbFn()}}</div>
</body>
</html>
Happy Helping!
Related
How do I go to next page when a button "Press me" is pressed?
Here is my code:
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="PaginationDemoCtrl">
<pagination num-pages="noOfPages" current-page="currentPage" max-size="maxSize"></pagination>
The selected page no: {{currentPage}}
</div>
<button>Press me</button>
</body>
</html>
http://plnkr.co/edit/NVgCX8nrx0ovnCWE2eok?p=preview
... Your question is pretty vague, but I believe this is what you're looking for:
<button value='Press me' onClick='document.location="./NVgCX8nrx0ovnCWE2eok?p=preview"'>
In your html move your controller to the body tag and add a click event for the button
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body ng-controller="PaginationDemoCtrl">
<div>
<pagination num-pages="noOfPages" current-page="currentPage" max-size="maxSize"></pagination>
The selected page no: {{currentPage}}
</div>
<button ng-click="goToNext()">Press me</button>
</body>
</html>
In your script add a function to handle the click event. I simply increment the current page number.
angular.module('plunker', ['ui.bootstrap']);
var PaginationDemoCtrl = function($scope) {
$scope.noOfPages = 20;
$scope.currentPage = 4;
$scope.maxSize = 5;
$scope.setPage = function(pageNo) {
$scope.currentPage = pageNo;
};
$scope.goToNext = function() {
$scope.currentPage = ++$scope.currentPage;
};
};
Link to Plunk
move ng-controller="PaginationDemoCtrl" to body tag.
add directive to button ng-click="setPage(currentPage+1)
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body ng-controller="PaginationDemoCtrl">
<div>
<pagination num-pages="noOfPages" current-page="currentPage" max-size="maxSize"></pagination>
The selected page no: {{currentPage}}
</div>
<button ng-click="setPage(currentPage+1)">Press me</button>
</body>
</html>
I am trying to make a To-Do app using AngularJS, but it is saying an error which is related to
Error: $controller:ctrlreg,
the directed link says:
A controller with this name is not registered.
Below is my code with the script.
angular.module('todoApp', [])
.controller('todoController', function($scope) {
$scope.tasks = [];
$scope.add = function() {
$scope.tasks.push($scope.title);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<br>
<div ng-app="todoApp" ng-controller="todoController"><br>
<input ng-model="title"><button ng-click="add()">Add</button>
<br><li ng-repeat="t in tasks">{{t}}</li>
<br>
</div>
check this out : plnkr
index.html :
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
<script src="app.js"></script>
</head>
<body ng-app="plunker" ng-controller="MainCtrl">
<input ng-model="title"><button ng-click="add()">Add</button>
<br><li ng-repeat="t in tasks">{{t}}</li>
</body>
</html>
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.tasks = [];
$scope.add = function() {
$scope.tasks.push($scope.title);
}
});
This is your code running fine,
angular.module('todoApp', [])
.controller('todoController', function($scope){
$scope.tasks = [];
$scope.add = function() {
$scope.tasks.push($scope.title);
$scope.title = ''
}
})
<!DOCTYPE html>
<html ng-app="todoApp" >
<head>
<meta charset="utf-8" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
<script src="app.js"></script>
</head>
<div ng-controller="todoController">
<input ng-model="title"><button ng-click="add()">Add</button>
<li ng-repeat="t in tasks">{{t}}</li>
</div>
</body>
</html>
I need your help with AngularStrap tabs and displaying calculated data. So, let's say I have a few inputs with ng-model. I calculate them and display in ng-bind. Everything works fine until I use tabs from AngularStrap. Then my output goes NaN - it looks like ng-model doesn't update, when I'm changing it's content.
You can take a look at what I mean here:
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.min.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.tpl.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<div bs-active-pane="tabs.activeTab" bs-tabs>
<div ng-repeat="tab in tabs" data-title="{{ tab.title }}" name="{{ tab.title }}" disabled="{{ tab.disabled }}" ng-include="tab.templateUrl" bs-pane>
</div>
</div>
</div>
</body>
</html>
main.js
angular.module('myApp', ['ngAnimate', 'mgcrea.ngStrap'])
.controller('myCtrl', ['$scope', function($scope){
$scope.multiply = function(){
return $scope.first * $scope.second;
};
$scope.add = function(){
return $scope.first + $scope.second;
};
$scope.tabs = [
{
"title": "First",
"templateUrl": "first.html"
},
{
"title": "Second",
"templateUrl": "second.html"
}];
$scope.tabs.activeTab = "First";
}]);
first.html
<input type="number" ng-model="first">
<input type="number" ng-model="second">
{{first}}
{{second}}
{{multiply()}}
second.html
<input type="number" ng-model="first">
<input type="number" ng-model="second">
{{first}}
{{second}}
{{add()}}
What is really weird, is that when I use it without the tabs, it's working perfectly. Where is the mistake? How can I make it work with tabs?
This example is working like a charm:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.min.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.tpl.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<input type="number" ng-model="first">
<input type="number" ng-model="second">
{{first}}
{{second}}
{{multiply()}}
</div>
</body>
</html>
So here's the deal, I was trying to learn AngularJs, since it's a must know now to properly build a front-end. However it just wouldn't work. I was following the video tutorials offered not heir site and did it all step by step but it wouldn't render.
Here's the code:
<!DOCTYPE html>
<html>
<head ng-app = "store">
<title>Benvenuti a TuttoUni</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="../libraries/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../css/login.css">
<script type="text/javascript" src="../libraries/angular/angular.js"></script>
<script type="text/javascript" src="../script/app.js"></script>
</head>
<body>
<div ng-controller="StoreController as store">
<h1> {{store.product.name}} </h1>
<h2> ${{store.product.price}} </h2>
<p> {{store.product.description}} </p>
</div>
</body>
</html>
and here is my javascript:
(function() {
var gem = {
name: 'Dodecahedron',
price: 2.95,
description: '...',
}
var app = angular.module('store', []);
app.controller('StoreController', function() {
this.product = gem;
});
})();
The outcome, as you can imagine is:
{{store.product.name}}
${{store.product.price}}
{{store.product.description}}
Without actually being replaced by their values.
You've got to place ng-app on html or body tags.
<!DOCTYPE html>
<html ng-app="store">
This should work :
<!DOCTYPE html>
<html>
<head ng-app = "store">
<title>Benvenuti a TuttoUni</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="../libraries/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../css/login.css">
<script type="text/javascript" src="../libraries/angular/angular.js"></script>
<script type="text/javascript" src="../script/app.js"></script>
</head>
<body ng-app="store">
<div ng-controller="StoreController">
<h1> {{product.name}} </h1>
<h2> ${{product.price}} </h2>
<p> {{product.description}} </p>
</div>
</body>
</html>
Javascript :
(function() {
var app = angular.module('store', []);
app.controller('StoreController', function($scope) {
$scope.product = {
name: 'Dodecahedron',
price: 2.95,
description: '...',
};
});
})();
The demo can be viewed at:
http://plnkr.co/edit/tLiAWIQ3bCAo4z4VFYTc?p=preview
script.js
var app=angular.module('app',[])
app.controller('MyController', function($scope) {
console.log("TEST")
$scope.on("$destroy", function() {console.log("DESTROY")})
})
index.html:
<!DOCTYPE html>
<html ng-app='app'>
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.3" src="https://code.angularjs.org/1.4.0-beta.3/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MyController">
<h1>Hello Plunker!</h1>
</body>
</html>
Does anyone have ideas about why so many errors are throwed in plunkr? Is there a way to deal with this?
There is an error in code:
$scope.on("$destroy", function() {console.log("DESTROY")})
Right:
$scope.$on("$destroy", function() {console.log("DESTROY")})