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>
Related
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 am trying to develop an Image Picker following these tutorials http://jsfiddle.net/huanlin/mgvrc/ and http://rvera.github.io/image-picker/#
Here is the code I have tried so far
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Try Image Picker</title>
<link rel="stylesheet" type="text/css" href="image-picker.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="image-picker.js"/> </script>
<script type="text/javascript" src="image-picker.min.js"/> </script>
<script>
$(document).ready(function () {
$("#selectImage").imagepicker({
hide_select: true
});
var $container = $('.image_picker_selector');
// initialize
$container.imagesLoaded(function () {
$container.masonry({
columnWidth: 30,
itemSelector: '.thumbnail'
});
});
});
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<select id="selectImage" class="image-picker">
<option value=""></option>
<option data-img-src="o.png" value="1"> Image 1 </option>
<option data-img-src="aa.png" value="2"> Image 2 </option>
<option data-img-src="ee.png" value="3"> Image 3 </option>
</select>
<br>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
But no image is showing in the browser. All CSS, JS scripts and images have been linked properly. Can you suggest what am I doing wrong here?
This is jQuery plugin. I see it's missing in your html head.
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.
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)