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)
Related
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>
my model contains some values that I want to modify before showing it to the user. Maybe this is written in the docs and I am to blind to see it.
Lets say I want to display my variable like this
<span decode-directive>{{variable}}</span>
I want to write the decode-directive and it should display variable + 1234 f.e.
I need this at a few points so I can't code it for only one special object.
I hope you can help me out with this.
You just have to use ngSanitize library and include as dependency in your app like this
var app = angular.module('plunker', ['ngSanitize']);
app.controller('MainCtrl', function($scope) {
$scope.name = 'Sören';
});
HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script data-require="ngSanitize#*" data-semver="1.3.15" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-sanitize.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>{{name}}!</p>
<span ng-bind-html="name"></span>
</body>
</html>
You could use an angular filter for this. If your variable is always html encoded text, an example of the solution would be:
filter('html',function($sce){
return function(input){
return $sce.trustAsHtml(input);
}
})
And then in the html you can use:
<span ng-bind-html="var | html"></span>
Fiddle:
angular.module("app",[])
.filter('html',function($sce){
return function(input){
return $sce.trustAsHtml(input);
}
})
.controller("main", function($scope){
$scope.var= "<Sören"
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="main" >
<span ng-bind-html="var | html"></span>
</div>
I have a select form in which I load data in shown here:
<select id="selectgroep" name="selectgroep" class="form-control" size='5' ng-model="afspraak.groep" ng-options="t.id as t.id for t in objecten">
</select>
And my object shown here:
$scope.afspraak = {
groep: '',
};
Shouldn't the data that I choose in the select form go into afspraak.groep? I have console logged it and it doesn't go in.
In a different partial I have made the exact same and it does do what I want it to do. I have compared the two at least 20 times, but I do not see what I'm doing wrong.
Check this:
function test(afspraak){
$scope.afspraak = {
groep: afspraak.groep
};
}
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.afspraak = {
groep: '',
};
});
<!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.8/angular.js" data-semver="1.4.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<select name="singleSelect" ng-model="afspraak.groep">
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
</select>
<br>
<p>{{afspraak.groep}}!</p>
</body>
</html>
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';
});
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.