This is the code HTML:
<div ng-controller="SelectCtrl">
<p>selected item is : {{selectedItem}}</p>
<p> age of selected item is : {{selectedItem.age}} </p>
<select ng-model="selectedItem" ng-options="item.name for item in items">
</select>
</div>
This is the code JavaScript:
var app = angular.module('myApp', []);
app.controller('SelectCtrl', function($scope) {
$scope.items = [{name: 'one', age: 30 },{ name: 'two', age: 27 },{ name: 'three', age: 50 }];
console.log($scope.selectedItem); //this is undefined :(
});
I want to show the selected value in the controller, but apparently it is undefined.
what is the correct way?
#JoshLeeDucks is correct. $scope.selectedItem is not defined on the scope when you are attempting to log its value. When the user assigns the property a value by selecting an element in the <select> input Angular will recognise that selectedItem is not defined and create it.
Log the value using a $watch:
console.log($scope.selectedItem); // undefined
$scope.selectedItem = 'someDefaultValue';
console.log($scope.selectedItem); // 'someDefaultValue'
$scope.$watch('selectedItem', function(newValue) {
console.log(newValue); // whatever `item.name` the user has selected
});
If you want to show the selectedItem in UI or using console.log when page loading. you should initialize the selectedItem value in your controller.
Like:
var app = angular.module('myApp', []);
app.controller('SelectCtrl', function($scope) {
$scope.items = [{name: 'one', age: 30 },{ name: 'two', age: 27 },{ name: 'three', age: 50 }];
$scope.selectedItem = $scope.items[0];
console.log($scope.selectedItem); //this is {name: 'one', age: 30 } :(
});
Related
I use Angular 1.5. I have two selects and I need to update 2nd select depending on the index of the option of 1st select.
Is there an easy way to get the index of option selected? Like from 0 to 5.
My 1st select is :
<select class="form-control" name="idEtablissement" ng-model="infosEtab.idEtablissement" ng-change="updateContrats()"
ng-options='item.id as item.name for item in listeEtablissement'>
</select>
I need something like that :
// return -1, listeEtablissement is [{id: 2, name: 'Test'}, {...}]
alert($scope.listeEtablissement.indexOf($scope.infosEtab.id));
$listeEtablissement is :
[{id: 2, name: 'Test'}, {id: 5, name: 'Test 2'}]
But I need to have the index, like 0 or 1.
EDITED
Ok I'll use Javascript approach, the most simple one :
$scope.updateContrats = function() {
var index = document.getElementById('idEtablissement').selectedIndex;
// ....
}
You should do it by native JavaScript using array.findIndex(); like in this runnable demo fiddle.
MDN reference of array.findindex()
View
<div ng-controller="MyCtrl">
<select class="form-control"
name="idEtablissement"
ng-model="infosEtab.idEtablissement"
ng-change="updateContrats()"
ng-options='item.id as item.name for item in listeEtablissement'>
</select>
</div>
AngularJS Application
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.selectedIndex = null;
$scope.listeEtablissement = [{
id: 2,
name: 'Test'
}, {
id: 5,
name: 'Test 2'
}];
$scope.updateContrats = function() {
$scope.selectedIndex = $scope.listeEtablissement.findIndex(function(item) {
return item.id === $scope.infosEtab.idEtablissement
});
}
});
Change
ng-options
to
index as item.name for (index, item) in listeEtablissement
I'm sure I must be doing this wrong, but:
I have an object that stores the id of an item. I also have an array of these items. I need to have a 'select' that represents the currently selected item, but that can also change the selected item.
I have set the 'select's model to the object.selectId.
The 'select' ng-options is "option.Text for option in options track by optionId"
Yet the model and 'select' options types don't match
How do I achieve what I need?
Here's a fiddle of what I am doing: https://jsfiddle.net/vb2xe1mc/5/
Code:
<script>
angular.module('myApp', [])
.controller('myctrl', ['$scope', function($scope) {
$scope.item = {
id: 1
};
$scope.options = [
{Text: "zero", Id: 0},
{Text: "one", Id: 1},
{Text: "two", Id: 2},
{Text: "three", Id: 3}
];
$scope.selectChange = function() {
alert($scope.item.id);
};
}]);
</script>
<div ng-app="myApp">
<div ng-controller="myctrl">
<select ng-model="item.id" ng-options="option.Text for option in options track by option.Id" ng-change='selectChange()'>
</select>
</div>
</div>
If you can, please let me know where I have gone wrong or correct the fiddle.
Thanks ^_^
Andy
Clarification:
The model item has id 1 already selected. I need the list to preselect the option with id 1 in this case. Also, When the option is selected it does not set the item.id to an int, rather it sets it to the entire option item. I need it to set the item.id to the option.Id
<select ng-model="item.id" ng-options="option.id as option.Text for option in options" ng-change='selectChange()'>
You want to select option.id, not option and track by is unnecessary.
Bind the select to ng-model="item", not ng-model="item.id".
Also decide on id vs. Id
<div ng-app="myApp">
<div ng-controller="myctrl">
<select ng-model="item" ng-options="option.Text for option in options track by option.Id" ng-change='selectChange()'>
</select>
</div>
</div>
angular.module('myApp', [])
.controller('myctrl', ['$scope', function($scope) {
$scope.item = {
Id: 1
};
$scope.options = [{
Text: "zero",
Id: 0
}, {
Text: "one",
Id: 1
}, {
Text: "two",
Id: 2
}, {
Text: "three",
Id: 3
}, ];
$scope.selectChange = function() {
console.log ($scope.item.Id)
alert($scope.item.Id);
};
}]);
See here for a fixed version: https://jsfiddle.net/ax3k418p/
https://jsfiddle.net/vb2xe1mc/10/
You need to bind item to ng-model, and inititally $scope.Id should be set to 1 not $scope.id = 1
Also check when you alert it should be alert($scope.item.Id);
<div ng-app="myApp">
<div ng-controller="myctrl">
<select ng-model="item" ng-options="option.Text for option in options" ng-change='selectChange()'>
</select>
</div>
</div>
JS:
angular.module('myApp', [])
.controller('myctrl', ['$scope', function($scope) {
$scope.item = {
Id: 1
};
$scope.options = [{
Text: "zero",
Id: 0
}, {
Text: "one",
Id: 1
}, {
Text: "two",
Id: 2
}, {
Text: "three",
Id: 3
}, ];
$scope.selectChange = function() {
alert($scope.item.Id);
};
}]);
Question :
how to set default value to the angular ui-select
drop down values are fetched from object and object wont be having default value.
and ui-select should set the default value in Frontend.
eg:
drop down values are as follows
1 -all fruits
2 -apple
3 -banana
4 -water melon
value from 2 to 4 are derived from object sent from server.but Frontend need to set default value ie 1 - all fruits
Referring to the below example set via ui-select2 how to migrate this in ui-select?
<select ng-model="fID" class="select" ui-select2 data-placeholder="select fruit">
<option value="">All fruits</option>
<option ng-repeat="f in frits value="{{f.fID}}">{{f.name}}</option>
</select>
<ui-select theme="select2" ng-model="fruits.selected">
<ui-select-match placeholder="select please" allow-clear="false"> {{$select.selected.name}}
</ui-select-match>
<ui-select-choices repeat="f in fruits | filter:$select.search">
<div ng-bind-html="f.name | highlight: $select.search:'underline'"></div>
</ui-select-choices>
</ui-select>
http://plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview
https://github.com/angular-ui/ui-select
Link :angular-ui/ui-select
you didnt use an id or something like that for option value so ui-select compares object address to understand if it is selected.
var p1 = { name: 'Adam', email: 'adam#email.com', age: 10 };
$scope.person = {selected: p1};
$scope.people = [
p1,
{ name: 'Amalie', email: 'amalie#email.com', age: 12 },
{ name: 'Wladimir', email: 'wladimir#email.com', age: 30 },
{ name: 'Samantha', email: 'samantha#email.com', age: 31 },
{ name: 'EstefanÃa', email: 'estefanÃa#email.com', age: 16 },
{ name: 'Natasha', email: 'natasha#email.com', age: 54 },
{ name: 'Nicole', email: 'nicole#email.com', age: 43 },
{ name: 'Adrian', email: 'adrian#email.com', age: 21 }
];
change plunker like this and you will have a default selected value.
to set the default value on view you can use ng-init and set first object as selected
In your controller add the following code:
$scope.fruits.selected = {name: 'All fruits'};
The above will set the default selected value to the drop down.
I found this working example: http://jsfiddle.net/NfPcH/28/
Angular code:
<a href="#" editable-select="user.status" e-ng-options="s.value as s.text for s in statuses">
{{ showStatus() }}
</a>
Controller:
app.controller('Ctrl', function($scope, $filter) {
$scope.user = {
status: 2
};
$scope.statuses = [
{value: 1, text: 'status1'},
{value: 2, text: 'status2'},
{value: 3, text: 'status3'},
{value: 4, text: 'status4'}
];
$scope.showStatus = function() {
var selected = $filter('filter')($scope.statuses, {value: $scope.user.status});
return ($scope.user.status && selected.length) ? selected[0].text : 'Not set';
};
});
So I have this array of items that are displayed with ng-repeat.
The items have a filter applied based on the ng-model of some input boxes.
Each item has a price attribute that is a number.
I want to be able to type the price in the input box and then get back all the items that are <= the price.
If it could be done as a custom filter that would be great but it needs to link the input box ng-model to the filter on the ng-repeat and bring back the items that are less than or equal to it.
It's kind of tricky I know but if anyone could help I would be vary grateful.
HTML
<div ng-app="app" ng-controller="ctrl">
Max price: <input type="text" ng-model="maxPrice">
<ul ng-repeat="e in items | cheaperThan:maxPrice">
<li>Item name: {{e.name}}, price: {{e.price}}$</li>
</ul>
</div>
JavaScript
var app = angular.module('app', []);
app.controller('ctrl', function($scope){
$scope.maxPrice = 100;
$scope.items = [
{name: 'Item 1', price: 123},
{name: 'Item 2', price: 110},
{name: 'Item 3', price: 90},
{name: 'Item 4', price: 80}
];
});
app.filter('cheaperThan', function(){
return function(ar, maxPrice){
console.log(ar);
return ar.filter(function(e){
return e.price <= maxPrice;
});
};
});
JSFiddle
I think something like this would work.
<input type="text" ng-model="somevalue"/>
<div ng-repeat="item in myitems | filter:myfilter(item)"></div>
$scope.somevalue;
$scope.myfilter = function(item) {
return function(theItem) {
// Return true or false base on the item and $scope.somevalue
};
};
If I want to set the value of the combobox I have tried this:
controllercode:
$scope.streettypeMockData = [{
name: 'Street',
value: 'Street'
}, {
name: 'Avenue'
}, {
name: 'Crescent'
}, {
name: 'Drive'
}, {
name: 'Road'
}, {
name: 'Highway'
}];
var sel = "Street";
var selectedValue = {
name: sel
};
$scope.streetTypeSelected = selectedValue;
Can anyone tell me why this does not work? see also http://plnkr.co/edit/4ISL8A1cNGCtafsc0leX?p=preview
The code has a few issues:
The ng-options select the name, while the ng-model points to an object. Better use streetType as streetType.name for streetType in streettypeMockData to select the entire object.
In this case, the initial value will not be honoured because Angular will try to compare objects by reference; use track by.
The full <select> should be:
<select class="form-control" ng-model="streetTypeSelected"
ng-options="streetType as streetType.name for streetType in streettypeMockData track by streetType.name">
See forked plunker.
You can simple use ng-init like this
<select ng-init="streetTypeSelected = streettypeMockData[0]" class="form-control" ng-model="streetTypeSelected" ng-options="streetType.name for streetType in streettypeMockData">
</select>
Working Demo
Also you can do Like as shown below
var app = angular.module('myApp', []);
app.controller('MainCtrl', function ($scope) {
$scope.streettypeMockData = [
{name: 'Street', value: 'Street'},
{name: 'Avenue'},
{name: 'Crescent'},
{name: 'Drive'},
{name: 'Road'},
{name: 'Highway'}
];
$scope.streetTypeSelected = $scope.streettypeMockData[0];
});
Working Demo
Also take a look at this
https://docs.angularjs.org/api/ng/directive/select