Markup:
<!DOCTYPE html>
<html ng-app="test">
<head>
<script data-require="angular.js#1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="ctrl">
<h1>Hello Plunker!</h1>
<select ng-model="user.item_id">
<option ng-selected="i.id == user.item_id" ng-repeat="i in items" value={{i.id}}>{{i.name}}</option>
</select>
</body>
</html>
JS:
var module = angular.module("test", []);
module.controller('ctrl', function($scope){
$scope.items = [
{id: 1, name: 'foo'},
{id: 2, name: 'bar'},
{id: 3, name: 'baz'},
];
$scope.user = {};
$scope.selectedItem = {id: 1};
$scope.user.item_id = $scope.selectedItem.id;
});
Plunker: https://plnkr.co/edit/7oi4KwzMhGi3kdltSklg?p=preview
Problem: if you inspect the html code of the select, you will see that the HTML selected attribute is properly placed.
However, it doesn't show as the highlighted option. Why?
== EDIT ==
That plunker code is working as expected on angular 1.3.20, but it's broken in 1.4.x or 1.5.x
Working plunker: https://plnkr.co/edit/0ApQeZ6Kar2yQisELXfT?p=preview
== EDIT2 ==
I've issued a ticket on angularjs queue: https://github.com/angular/angular.js/issues/14876#issuecomment-231010972
Basically, they say we should stick to ngOptions, though they don't know why ngSelected got broken.
Well, you could use ng-options instead...
<select ng-model="user.item_id" ng-options="i.id as i.name for i in items">
</select>
Check here https://plnkr.co/edit/G4Hu4ZpShaUPCE5zTsdV
I don't see this working on any version that you mention. Anyway, check this plunker
https://plnkr.co/edit/V0ybr70kRpkcaxLKBHTK?p=preview
The way that you wrote the select, i can reproduce the same thing on any input. And the reason is because it is not how angular binding works, your select doesn't know anything about his model, unless you change the model (i.e. using ng-init).
Using this way:
<option ng-selected="i.id == user.item_id" ng-repeat="i in items" value={{i.id}}>{{i.name}}</option>
doesn't mean that your model will update, it only updates the dom element.
Related
I have a simple example where I am exptecting my paragraphs to filter out values based on unique age, but I get the unknown provider error. How ?
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<p ng-repeat="x in persons | unique: 'age'">{{x.name}}</p>
<script>
//App declaration
var app = angular.module('myApp',[]);
//Controller Declaration
app.controller('myCtrl',function($scope){
$scope.persons = [{name: "Peter",age:23},{name:"Laila",age:25},{name:"Rosy",age:23}];
});
</script>
</body>
</html>
You need to inject 'ui.directives' and 'ui.filters' module to your app
var app = angular.module('myApp',['ui.directive', 'ui.filters']);
Since ui.directives and ui.filters modules are present in AngularUI, you will also need to refer angular-ui.js in your application
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
Your full code should look something like this
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<p ng-repeat="x in persons | unique: 'age'">{{x.name}}</p>
<script>
//App declaration
var app = angular.module('myApp',['ui.directives','ui.filters']);
//Controller Declaration
app.controller('myCtrl',function($scope){
$scope.persons = [{name: "Peter",age:23},{name:"Laila",age:25},{name:"Rosy",age:23}];
});
</script>
</body>
</html>
That because the unique filter can currently be found as part of AngularJs UI Utils.
To make this work you must include it as an additional reference in your module angular.module('myApp', ['ui', 'ui.filters']);
Hope this help you.
here is my code.. where I made problem.. please help me out.. I am trying to create a controller what fill fetch data and show in html li part.. but I don't understand where is the error.. I have tried with adding jQuery min library and without it.. but failure.. kindly help me to short out this problem..
<html data-ng-app="myApp">
<head>
<title>First Angular application</title>
</head>
<body>
checkNames:
<input type="text" data-ng-model="namek">
<div class="container" data-ng-controller="SimpleController">
<ul>
<li data-ng-repeat="cast in castomers | filter:namek">{{cast.name|uppercase}} - {{cast.city}}</li>
</ul>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script>
function SimpleController($scope) {
$scope.castomers = [{ name: 'krishnendu sarkar', city: 'kolkata' },
{ name: 'chanchal sarkar', city: 'bangalore' },
{ name: 'nilava chakraborty', city: 'pune' }]
};
</script>
</body>
</html>
thanks in advance..
You should create and angular module first with name myApp then you could have data-ng-controller="SimpleController" to be move it over body tag so that the namek input field included inside the SimpleController controller context.
Add ng-app="myApp" on the body tag. so that angular module gets initialize on page.
Markup
<body data-ng-controller="SimpleController">
checkNames:
<input type="text" data-ng-model="namek">
<div class="container">
<ul>
<li data-ng-repeat="cast in castomers | filter:namek">{{cast.name|uppercase}} - {{cast.city}}</li>
</ul>
</div>
</div>
Controller
angular.module('myApp', []).controller('SimpleController', SimpleController);
function SimpleController($scope) {
$scope.castomers = [{
name: 'krishnendu sarkar',
city: 'kolkata'
}, {
name: 'chanchal sarkar',
city: 'bangalore'
}, {
name: 'nilava chakraborty',
city: 'pune'
}]
};
Demo PLunkr
please see this link here to see the whole code.
You should create angular module "myApp" which define the application then controller inside it.
I have a simple view with an input text field in which the user enter his name and a controller must retrieve that value an assign to employeeDescription variable. The problem is that the ng-model value (from the input) doesn't come to the controller, I just tried using $watch like Radim Köhler explains Cannot get model value in controller method in angular js but doesn't work. I just think it must be simple.
Also a just try by retrieving the name variable (ng-model) from the $scope, like $scope.employeeDescription = $scope.name; but doesn't retrieve value and the Google chrome console doesn't give me any output about that. Any solution?
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body ng-app='angularApp'>
<div ng-controller='nameController'>
<div>
Name <input type="text" ng-model='name' />
</div>
Welcome {{employeeDescription}}
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.js
(function(angular) {
var myAppModule = angular.module('angularApp', []);
myAppModule.controller('nameController', function($scope) {
$scope.employeeDescription = name;
});
})(window.angular);
Your code should fail, cause the 'name' variable in the controller is never defined. You have two variables defined in your code: $scope.employeeDescription and $scope.name (defined in the ng-model of the input). Note that '$scope.name' is being defined, not 'name'.
My suggestion is to leave only one variable:
<div>
Name <input type="text" ng-model='employeeDescription' />
</div>
myAppModule.controller('nameController', function($scope) {
$scope.$watch('employeeDescription', function() {
console.log($scope.employeeDescription);
});
});
Learning to use angularJS,
I have this particular code in my index.html. Dynamic typing works in the upper part, but the injection doesn't. What possibly might have been gone wrong?
Code :
<!DOCTYPE html>
<html>
<head>
<title>Test1</title>
</head>
<body ng-app="">
<!-- Dynamic Type -->
<input type="text" ng-model="name1" /><br>
<h1>Hello {{name1}}</h1>
<!-- End dynamic Type -->
<!-- Scope Injection begin-->
<div class="container" ng-controller="myController">
<input type="text" ng-model="naam" /><br>
<h3>Looping</h3>
<ul>
<li data-ng-repeat="cust in customerlist | filter:naam | orderBy:'city'"> {{cust.name | uppercase}} - {{cust.city}} </li>
</ul>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
function myController ($scope) {
$scope.customerlist = [
{name: 'Raj Bannerjee', city: 'Zaire'},
{name: 'Prasun Bannerjee', city: 'Udaipur'},
{name: 'Raj Malhotra', city: 'Dubai'},
{name: 'Prasun Joshi', city: 'Mumbai'}
];
}
</script>
</body>
</html>
From version 1.3 angular disabled using global controller constructors:
https://github.com/angular/angular.js/commit/3f2232b5a181512fac23775b1df4a6ebda67d018
With the exception of simple demos, it is not helpful to use globals
for controller constructors. This adds a new method to
$controllerProvider to re-enable the old behavior, but disables this
feature by default.
BREAKING CHANGE: $controller will no longer look for controllers on
window. The old behavior of looking on window for controllers was
originally intended for use in examples, demos, and toy apps. We found
that allowing global controller functions encouraged poor practices,
so we resolved to disable this behavior by default.
So you must refactor it like so:
angular.module('app',[])
.controller('myController', ['$scope', function($scope) {
$scope.customerlist = [
{name: 'Raj Bannerjee', city: 'Zaire'},
{name: 'Prasun Bannerjee', city: 'Udaipur'},
{name: 'Raj Malhotra', city: 'Dubai'},
{name: 'Prasun Joshi', city: 'Mumbai'}
];
}]);
And also refer to your module:
<body ng-app="app">
I'm creating a tree view of the amount of forms employees either haven't filled out, have started or completed. There can be multiple nested levels.
For a simple example the rows are:
Year 2014: missing:3, started=7, completed=7
John Doe: missing=2, started=3, completed=5
Phil Smith: missing=1, started=4, completed=2
What if I filter on employee? Then I want the missing, started and completed count to change for the year row. How do I have those variables be dynamically calculated with an ng-repeat?
You would want to calculate the subtotals in the controller. Your problem is that you want the subtotals to update according to the filters that are applied on view. You can achieve this by injecting $filter into your controller.
Have a look at the plunk here: http://plnkr.co/edit/JwUOzm5u3G7379I1W6hk?p=preview
I created a filter in an input box. Try changing the text, the subtotals update accordingly.
In this case I use the 'filter' filter both in the view as well as the controller so that the view and the subtotal update simultaneously.
Code below:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<div ng-controller="mainCtrl as main">
<input type="text" ng-model="main.empName" placeholder="name filter">
<div ng-repeat="year in main.data">
{{year.yearNum}}:{{main.calculateTotal(year.yearNum)}}
<div ng-repeat="employee in year.employees|filter:main.empName">
{{employee.name}} : {{employee.cost}}
</div>
</div>
</div>
<script>
angular.module('app',[])
.controller('mainCtrl',function($filter){
var main=this;
main.calculateTotal=function(yearNum){
var data=main.data;
var total=0;
for(var i=0;i<data.length;i++){
if(data[i].yearNum==yearNum)
{
var employees=$filter('filter')( main.data[i].employees, main.empName );
for(var j=0;j<employees.length;j++){
total+=employees[j].cost;
}
}
}
return total;
}
main.data=[
{
yearNum:2012,
employees:[
{
name:"jane",
cost:200
},
{
name:"jow",
cost:400
}
]
},
{
yearNum:2013,
employees:[
{
name:"jane",
cost:250
},
{
name:"jow",
cost:450
}
]
}
];
});
</script>
</body>
</html>