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';
});
Related
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>
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
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'm trying to DRY my html by using ng-repeat. With the following code:
<div class="form-group" ng-repeat="(key, value) in expense">
<label for={{key}} class="col-sm-2 control-label">{{key}}:</label>
<div class="col-sm-10">
<input type="number" class="form-control" id={{key}} ng-model="expense" />
</div>
</div>
The problem I'm having is trying to concatenate to the "expense" in ng-model. I want to add the key.
IE: ng-model="expense.{{key}}" but that doesn't work.
Suggestions?
Thanks!
either you can provide ng-model = value or you can provide ng-model=expense[key]
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.expense = {
cost: 1,
basic: 2
}
});
<!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">
<p>Hello {{name}}!</p>
<div class="form-group" ng-repeat="(key, value) in expense">
<label for={{key}} class="col-sm-2 control-label">{{key}}:</label>
<div class="col-sm-10">
<input type="number" class="form-control" id={{key}} ng-model="value" />
</div>
</div>
</body>
</html>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.expense = {
cost: 1,
basic: 2
}
});
<!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">
<p>Hello {{name}}!</p>
<div class="form-group" ng-repeat="(key, value) in expense">
<label for={{key}} class="col-sm-2 control-label">{{key}}:</label>
<div class="col-sm-10">
<input type="number" class="form-control" id={{key}} ng-model="expense[key]" />
</div>
</div>
</body>
</html>
key in ng-repeat is declared as variable and expense is variable too .. you can not mixed __toString {{}} with variable. You should use expense.key as object or array or depend on type in ng-model.
HTML ID is only html but ng-model have listener and expect variable.
Access to both as variables its good approach.
CODE : http://plnkr.co/edit/H2hmEukfjaPL1T4W298O?p=preview
HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="chosen#*" data-semver="1.0.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.min.css" />
<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.2.x" src="https://code.angularjs.org/1.2.20/angular.js" data-semver="1.2.20"></script>
<script src="chosen.jquery.js"></script>
<script src="chosen.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<select chosen class="red" ng-model="bar">
<option>Hi</option>
<option>This is fun</option>
<option>I like Chosen so much</option>
<option>I also like bunny rabbits</option>
<option value=""></option>
</select>
</body>
</html>
JS
var app = angular.module('plunker', ['localytics.directives']);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
You can see that I tried to add class red to the div created by angular-chosen, together with other classes chosen-container chosen-container-single. I don't want to change those classes manually.
What is the right way to make sure additional classes got added?
Thanks
It looks like line 153 of chosen.jquery.js has an option for inherit_select_classes that defaults to false.
line 39 of the directive in chosen.js looks at the chosen attribute for the options:
options = scope.$eval(attr.chosen) || {};
so making your select markup:
<select chosen="{inherit_select_classes:true}" class="red" ng-model="bar">
results in this being generated:
<div class="chosen-container chosen-container-single red ng-pristine ng-valid localytics-chosen" >
(omitted extra attributes not relevant to this question)