I have this ng-select element:
<body ng-controller="MainCtrl">
<select ng-model="selectedItem" ng-model="selectedItem">
<option value="-1" selected>- manual -</option>
<option ng-repeat="(key, value) in items">{{value.Name}}</option>
</select>
</body>
Here is controller:
$scope.selectedItem = null;
$scope.items = [{Name: 'one', Id: 30 },
{Name: 'two', Id: 27 },
{Name: 'threex', Id: 50 }];
Here is working PLUNKER.
Inside of ng-select I have two options the static(-manual-) and the options generated by ng-repeat element.
My problem is: when user make selection of the option generated by ng-repeat the
$scop.selectedItem get the Name of the selected item, while I need to set the Id of the selected element.
For example:
If in the plunker above user select from ng-select element two the $scop.selectedItem will get two the name of the item while, I need $scop.selectedItem to get 27 the Id of the selected item.
Any idea how can I make $scop.selectedItem to get the Id of the selected item?
Have a look at the ng-options directive. You can pass a list comprehension like expression to extract what you need.
For example:
<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
https://docs.angularjs.org/api/ng/directive/ngOptions
As Delapouite said, you should use ng-options. I've updated your plunkr to implement this.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [{name: '- manual -', id: -1 },
{name: 'one', id: 30 },
{name: 'two', id: 27 },
{name: 'threex', id: 50 }];
$scope.selectedItem = $scope.items[0];
});
<select
ng-model="selectedItem"
ng-options="item.name for item in items track by item.id"
></select>
Try this
<option ng-repeat="(key, value) in items" key="{{value.Id}}" value="{{value.Id}}">{{value.Name}}</option>
All that I have done is I have set key and value = {{value.Id}} and the selectedItem will pick it up.
Here's the UPDATED PLNKR
I would suggest to use ng-options and to push your default value (manual) in $scope.items.
I used ng-init to set the default value of your select to - manual -.
<body ng-controller="MainCtrl">
<select ng-model="selectedItem" ng-options="i.Id as i.Name for i in items" ng-init="selectedItem = items[0].Id"></select>
selected item: {{selectedItem}}
</body>
$scope.items = [{Name:'- manual -', Id: -1},
{Name: 'one', Id: 30 },
{Name: 'two', Id: 27 },
{Name: 'threex', Id: 50 }];
Here is a working Plnkr.
Related
Why this code doesn't work as expected? I expect China be selected in the select but it is empty.
<div ng-app="app">
<div ng-controller="appController" class="p-2" ng-init="init()">
<select
name="user_country"
class="form-control"
ng-model="country"
ng-options="item.id as item.title for item in countries track by item.id">
<option value="" disabled>Select Country</option>
</select>
</div>
</div>
Controller:
var app = angular.module('app', []).controller('appController', ['$scope', function($scope){
$scope.country = 3
$scope.countries = [
{id: 1, title: 'US'},
{id: 2, title: 'Japan'},
{id: 3, title: 'China'},
{id: 4, title: 'Russia'}
]
}])
I expect to see China rather than an empty field. Here is a CodePen example https://codepen.io/grinev/pen/YJERvz.
Udpated the ng-options to
ng-options="item.id as item.title for item in countries">
Answer
without track By - JSFiddle
with track By - JSFiddle
track by just helps Angular internally with array sorting as far as I know. The value of the options is defined by the first argument (in your case item). If you want it to be by id then you should use item.id as item.name for item in items
You need to be storing the object, not the id. So instead of $scope.country = 3; you need to put it after the countries array and set it to $scope.country = $scope.countries[2];
How i get third Column values from $scope.item based on select
$scope.items = [{name: 'one', age: 30, xxx: '15' },{ name: 'two', age: 27,xxx: '12' },{ name: 'three', age: 50,xxx: '16' }];
<p>selected item is : {{selectedItem.xxx}}</p>
<select ng-model="selectedItem" ng-change="selectAction()">
<option ng-repeat="item in items" value="{{item.age}}">{{item.name}}</option>
Just access third element using index
<p>selected item is : {{items[2].xxx}}</p>
You've defined selectedItem as the model of the dropdown, and the value of each option is set to item.age. So, for current selection, $scope.selectedItem will represent age instead of xxx.
If you want to select xxx instead, change the value of the option to xxx:
<option ng-repeat="item in items" value="{{item.xxx}}">{{item.name}}</option>
Now when you select an option in the dropdown, $scope.selectedItem will represent the value of xxx in the corresponding item.
Easiest option would be to use ng-value to assign the whole item object as the value.
<p>selected item is : {{selectedItem.xxx}}</p>
<select ng-model="selectedItem" ng-change="selectAction()">
<option ng-repeat="item in items" ng-value="{{item}}">{{item.name}}</option>
</select>
example in action here: https://plnkr.co/edit/e7j8jkVrVNAo3Ar9sc2q?p=preview
I am new to angular JS. I have a dropdown box where static options with values are present.
Based on condition I have to select the default value which matches the value from Database. How can it be achieved?
model="TemplateObj.IsActive" has the int value 0,1 or 2 from DataBase.
<label class="">STATUS</label>
<select class="form-control input-sm" style="border: none" required ng-model="TemplateObj.IsActive" >
<option value="2">In Development</option>
<option value="1">Active</option>
<option value="0">InActive</option>
</select>
Use ng-options directive with array of statuses. The syntax may look a bit complicated for beginner, but you'll learn it someday: value as title for element in array
JS:
$scope.statuses = [{
title: 'In Development',
value: 2
}, {
title: 'Active',
value: 1
}, {
title: 'Inactive',
value: 0
}];
HTML:
<select ng-model="TemplateObj.IsActive" ng-options="status.value as status.title for status in statuses"></select>
Here is jsfiddle with working example.
An option would be to make use of the ng-options directive.
The documentation is here and there are quite a few examples you can guide from.
Try ngOptions instead of normal HTML select.
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope) {
$scope.status = [{
title: 'In Development',
value: 2
}, {
title: 'Active',
value: 1
}, {
title: 'Inactive',
value: 0
}];
$scope.TemplateObj = {
"IsActive": 1
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<select ng-model="TemplateObj.IsActive" ng-options="option.value as option.title for option in status"></select>
</div>
I would like to show only my item.name from my object and I don´t know how to do it.
Here is my pen and now the "name" and "age" properties are being shown.
CodePen
<body>
<div ng-controller="Test">
<select ng-model="selectedItem" ng-options="k.name as v for (k,v) in items">
</select>
</div>
</body>
$scope.items has to be an array, then you can loop over items in your ng-options like this:
In your Angular controller
$scope.items = [
{name: 'Michael', age: 29},
{name: 'John', age: 29},
{name: 'Ronald', age: 29}
];
In your HTML
<select ng-model="selectedItem" ng-options="i.name for i in items"></select>
Forked your CodePen here.
I am struggling with the following piece of code.
<body ng-controller="MainCtrl">
<h1>Select something below</h1>
<select id="s1" ng-model="selectedItem" ng-options="item as item.name for item in items"></select>
<h3>The selected item:</h3>
<pre>{{selectedItem | json}}</pre>
<h3>The inner html of the select:</h3>
<pre id="options" class="prettify html"></pre>
</body>
and in js
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [
{ id: 1, name: 'foo' },
{ id: 2, name: 'bar' },
{ id: 3, name: 'blah' }];
$scope.selectedItem = { id: 3, name: 'blah' };
});
I have a selected item by default. But it doesn't show up in the selection while the page loads.
I have provided my code in the following link
http://plnkr.co/edit/FlESsL?p=preview
In the given example the dropdown should by default select the item blah.
TIA
Mobin
The first thing you need to do is update your angularjs version, then you can simply follow the angular select examples.
In the provided link they use track by to display the correct object, I took the liberty of editing their example plunker and added your code Here it is!
as you can see, the only thing I added to your code was track by item.id
Try this:
<select id="s1" ng-model="selectedItem" ng-options="item.id as item.name for item in items"></select>
and:
$scope.selectedItem = 3;
Before putting question did you go through - https://docs.angularjs.org/api/ng/directive/ngOptions
Just make below change in your controller -
$scope.selectedItem = $scope.items[0];