This is the fist angular app that I try to make ,let's see
var app = angular.module('miApp', []);
app.controller('CochesController', function($scope) {
$scope.coche ={
marca:"Renault",
modelo:"Clio",
};
$scope.nombreCompleto = function(){
var x = $scope.coche;
return x.marca+" "+x.modelo;
};
})
and the view
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js" data-require="angular.js#1.4.x"></script>
<script data-require="angular.js#1.4.x" data-semver="1.4.8" src="script.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="miApp" ng-controller="CochesController">
<p>{{coche.nombreCompleto()}}</p>
</body>
</html>
I can use the attributes marca and modelo but I can't use the function ¿whats is wrong?
You could directly call the method available inside a controller scope by methodName, It should be like below,
<p>{{nombreCompleto()}}</p>
Related
How do you save these tags with AngularJS? Everytime I refresh the page, the tags I add disappear. I've tried local storage but I wasn't able to make it work.
HTML:
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="http://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css" />
<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.15"></script>
<script src="http://mbenford.github.io/ngTagsInput/js/ng-tags-input.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<tags-input ng-model="tags"></tags-input>
<p>Model: {{tags}}</p>
</body>
</html>
JS:
var app = angular.module('plunker', ['ngTagsInput']);
app.controller('MainCtrl', function($scope, $http) {
$scope.tags = [
{ text: 'Tag1' },
{ text: 'Tag2' },
{ text: 'Tag3' }
];
});
Link: http://mbenford.github.io/ngTagsInput/demos
I understand you can put debounce at or anywhere with ng-model. But what if there are multiple ng-model of the same object and one place to "display" it. And I want to set debounce at the "display" element instead.
For example, how do I make name to slowly display in <p> but sync fast in between input:
http://plnkr.co/edit/RZfqDfNGVdswniuPkuIC?p=preview
HTML
<!DOCTYPE html>
<html ng-app="plunker">
<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.4.x" src="https://code.angularjs.org/1.4.1/angular.js" data-semver="1.4.1"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p ng-model-options="{ debounce: { 'default': 500 } }">Hello {{name}}!</p>
<input ng-model="name" >
<input ng-model="name">
</body>
</html>
JS
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
From Documentation
The syntax InvoiceController as invoice tells Angular to instantiate
the controller and save it in the variable invoice in the current
scope.
We also changed all expressions in the page to read and write
variables within that controller instance by prefixing them with
invoice.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js" data-require="angular.js#1.3.x"></script>
<script src="app.js"></script>
</head>
<body ng-controller="InvoiceController as invoice">
<p>Hello {{invoice.name}}!</p>
</body>
</html>
JS
var app = angular.module('plunker', []);
app.controller('InvoiceController', function() {
this.name = 'World';
});
But it is not working as mentioned in the document. I just moved the inline scripts to external file.
PLUNKER DEMO
Also why it is not working if i pass $scope to the controller function
app.controller('InvoiceController', function($scope) {
$scope.name = 'World';
});
You forgot to set the ng-app
<html ng-app="plunker">
<!-- REST OF HTML -->
</html>
I have a a button with a ng-click that is not firing. Below is the controller and button html. Help - why is it not working?
This is my controller
angular.module('app').controller('MarvelController', MarvelController);
// use to make HTTP requests
MarvelController.$inject = [
"$http"
];
var character = 0;
function MarvelController($http){
var self = this;
console.log(self.update);
self.character = character;
self.glenn = 24;
console.log(self.glenn);
self.chris = function(){
console.log("chris");
}
this is the button that is not firing:
<button ng-click="chris()">button</button>
If you put your function on $scope it will work. Or you can use the controller as syntax. e.g.
<div ng-controller="MarvelController as ctrl">
<button ng-click="ctrl.chris()">button</button>
</div>
var app = angular.module('plunker', []);
app.controller('MainCtrl',['$scope','$http', function($scope,$http) {
$scope.name = 'World';
var self = this;
self.chris = function()
{
console.log("chris");
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">
<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.13/angular.js" data-semver="1.3.13"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as ctrl">
<p>Hello {{name}}!</p>
<button ng-click="ctrl.chris()">button</button>
</body>
</html>
I have this code... i load in <head> many files.js, this works good... but ... {{sec-intro}} is a variable and has its value, but does not load the file...
<!-- language: lang-js -->
<script type="text/javascript">
$( document ).ready(function() {
jQuery('head').load( 'tpl/head.html' );
});
</script>
<script type="text/javascript">
$( document ).ready(function() {
jQuery('#intro').load( 'tpl/sec-intro-{{sec-intro}}.html' );
});
</script>
I'm not sure if I know what do you mean but you can try this if sec-intro is a javascript variable:
<script type="text/javascript">
$( document ).ready(function() {
jQuery('#intro').load( 'tpl/sec-intro-' + sec-intro + '.html' );
});
</script>
But I think you are confusing with AngularJS notation that uses {{var}}.
EDIT:
Well, first of all variable name can't have hyphen so you need to change that name.
Second thing, you should declare the function in the controller's code. I did a little angular app that is the code:
Script:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.secintro = '01';
$scope.loadFunction = function(){
jQuery('#intro').load('tpl/sec-intro-' + $scope.secintro + '.html');
};
$scope.loadFunction();
});
HTML:
<!DOCTYPE html>
<html ng-app="plunker">
<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="jquery" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="angular.js#1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
</body>
</html>
Then you can use loadFunction as angularJS function, i.e: ng-init="loadFunction();"
<body ng-controller="MainCtrl" ng-init="loadFunction();">
</body>
This will execute the function when controller is ready, so you won't need the $scope.loadFunction(); inicialization.
Here is the plunker just print in console the correct string.
I hope this finally works for you.