Angularjs 1.5.5
I have a simple Select which works fine:
<select ng-model="selectedPart">
<option ng-repeat="optionPart in parts" value="{{optionPart.Id}}">{{optionPart.Title}}</option>
</select>
When I set the id as a string, the Select renders that correctly:
$scope.selectedPart = "1";
When I set it to an Int from an object, no change is made.
$scope.selectedPart = $scope.parts[0].Id;
Why does the Int not update the Select but the string does, and how would I get it to work?
Try it like this instead
<select ng-model="selectedPartId"
ng-options="part.Id as part.Title for part in parts">
</select>
Note that I've changed the model to reflect that you're selecting an id and not a parts entry.
If you did want to bind an object, try this
<select ng-model="selectedPart"
ng-options="part.Title for part in parts track by part.Id">
</select>
You could then assign it via $scope.selectedPart = $scope.parts[0];
There are two ways in which you can do it:
1. $scope.parts = [{
id: 2,
Title: 'XX'
}, {
id: 5,
Title: 'XXXX'
}, {
id: 8,
Title: 'XXVVV'
}];
$scope.selectedPart = $scope.parts[1];
<select ng-options="part as part.Title for part in parts track by part.id" ng-model="selectedPart"></select>
2. $scope.parts = [{
id: 2,
Title: 'XX'
}, {
id: 5,
Title: 'XXXX'
}, {
id: 8,
Title: 'XXVVV'
}];
$scope.selectedPart = $scope.parts[1].id;
<select ng-options="part.id as part.Title for part in parts" ng-model="selectedPart"></select>
Related
I'm a pretty new in this area (one mounth) and I'm developing application with angularJs, I'm getting back Json requisition with a list, I have to put the name ({{empresa.name }}) when the user select I get the ID({{empresa.IdEmpresa}}).
I want use ng-repeat for that, something like (ng-repeat="empresa in empresas").
I'm getting the Json with the list from the JavaController, my Entity is named Empresa, I declare a empty object on angular Like that ( $scope.empresas = {}) and give the callback to this emprty object, right?!
My select field is like that
<label>Empresa</label>
<select class="form-control">
<option value="{{empresa.EmpresaId}}">{{empresa.name}}</option>
</select>
how do I use repeat in this ?
Assuming your JSON data look like this
$scope.empresas = [
{ EmpresaId: 1, name: 'one' },
{ EmpresaId: 2, name: 'two' },
{ EmpresaId: 3, name: 'three' }
]
Apart from using ng-repeat on <options>, you can also utilise ng-options
<select ng-options="e.EmpresaId as e.name for e in empresas" ng-model="???"></select>
You can use ng-repeat="empresa in empresas" on the <option> tags.
Here's an example:
<select>
<option ng-repeat="empresa in empresas" value="{{empresa.EmpresaId}}">{{empresa.name}}</option>
</select>
Controller Code
$scope.empresas = [
{ EmpresaId: 101, name: 'India' },
{ EmpresaId: 102, name: 'US' },
{ EmpresaId: 103, name: 'UK' }
];
I am working with angular and semantic ui. I am trying to make a selection of Y and N through a select option. Basically i just want the first item was selected when the page show up. Tried many ways but i couldn't make it works.
Please take a look at this plunker.
angular.module('myapp', [])
.controller('testctrl', function ($scope){
$scope.add = {};
$scope.Consigns = [{value: 'N',label: 'N'}, {value: 'Y',label: 'Y'}];
$scope.add.consign = $scope.Consigns[0].label;
})
.controller('testctrl1', function ($scope){
$scope.add = {};
$scope.Consigns1 = [{value: 'N',label: 'N'}, {value: 'Y',label: 'Y'}];
$scope.add.consign1 = $scope.Consigns1[0].label;
});
https://plnkr.co/edit/cHcLd14xKFxLMS4uy0BM?p=preview
Print the model value in default placeholder. Rather than sending the label value in $scope.add.consign you could send the whole object and print whats required.
Working plunker: https://plnkr.co/edit/XeuiS7p3K1OOx5nHL9c5?p=preview
javascript:
$scope.ListOrder =
[
{ Name: "price", Id: 1 },
{ Name: "exist", Id: 2 },
{ Name: "Sale", Id: 3 },
{ Name: "New", Id: 4 }
];
$scope.Order = { Name: "exist", Id: 1 };
HTML:
<select ng-model="Order" ng-options="obj.Name for obj in ListOrder"></select>
Remove
<script>
$('.ui.dropdown').dropdown();
</script>
and also change select tag to this
<select ng-model="add.consign" class="ui fluid dropdown" ng-options="x.label as x.label for x in Consigns">
<option value=""></option>
</select>
I'm just trying to create a separator for my select/option dropdown menu and am having trouble doing so. i'm trying to create a dropdown that looks like this:
NO IMAGE
CUSTOM IMAGE
rest of data....
I feel like what i'm doing should work but it's not... any help?
controller
$scope.teamListWithOptions.push({ name: "NO IMAGE" }, { name: "CUSTOM IMAGE" }, { name: "____________", notSelectable: true });
//this just adds the rest of the data
for (var a = 0; a < data.length; a++) {
$scope.teamListWithOptions.push(data[a]);
}
html
<select class="form-control" ng-model="contentTeam1Selected" ng-change="selectContentTeam1(contentTeam1Selected)"
ng-options="team as team.name for team in teamListWithOptions" ng-disabled="team.notSelectable">
</select>
If you are using a more recent version of angular (>= 1.4 i think), you can use the disable when syntax inside the ng-options attribute. For example:
ng-option="p as p.name disable when p.show == false for p in people"
I have created an example fiddle here: http://jsfiddle.net/wwu071so/1/
You could probably use orderBy to create an optgroup and get the effect you want.
http://jsfiddle.net/wwu071so/
<select
ng-options="p as p.name group by p.show for p in people | orderBy:'show'"
ng-model="selectedPerson"></select>
$scope.people = [
{ id: 1, name: 'Image' },
{ id: 2, name: 'Custom'},
{ id: 3, name: 'John', show: ' ' },
{ id: 4, name: 'Ben', show: ' ' }
];
$scope.selectedPerson = $scope.people[3];
I am using AngularJS directive and I need to set a selected option of a dropdown list in my template.
<select id="energySource" ng-options="o.name for o in energyOptions" ng-model="energy" ng-selected="energy" ng-change="energyChange();"></select>
The content of the optionlist depends on resources send by a server when the page is loaded.
var energyChosen = "All";
angular.element(document).ready(function () {
$.get('/Dashboard/GetResources', function (data) {
scope.Resources = data;
scope.energyOptions = [{ name: scope.Resources.Electricity, id: "Electricity" }, { name: scope.Resources.Gas, id: "Gas" },
{ name: scope.Resources.Water, id: "Water" }, { name: scope.Resources.Solar, id: "Solar" }];
scope.energy = scope.energyOptions[0];
energyChosen = scope.energy.id;
scope.$apply();
});
It works except that a blank option is preselected which disappears when i select an option
I would like to be able to preselect one option. I thought that
scope.energy = scope.energyOptions[0];
would do the trick but it didn't. How can i preselect an option in this case ?
The way you are doing your ng-options it will store the name of the option in scope.energy not the whole option. You were on the right track when you did:
scope.energy = scope.energyOptions[0];
But it won't work because it expects scope.energy to be the name and not the whole option. What you want to do in your ng-options is something like:
<select id="energySource" ng-options="o as on.name for o in energyOptions" ng-model="energy" ng-selected="energy" ng-change="energyChange();"></select>
The important change is the addition of the o as o.name. The 'o' on the left is what will actually be selected and stored in your scope.energy, while the as o.name is the text that will be displayed on your pull down.
Make sure the scope.energy is outside your initialization.
$scope.energyOptions = [
{ name: "test1", id: "Electricity" },
{ name: "test2", id: "Gas" },
{ name: "test3", id: "Water" },
{ name: "test4", id: "Solar" }];
$scope.energy = $scope.energyOptions[2];
http://jsfiddle.net/WcJbu/
When I select a person, I want the favoriteThing selector to display their current selection.
<div ng-controller='MyController'>
<select ng-model='data.selectedPerson' ng-options='person.name for person in data.people'></select>
<span ...> likes </span>
<select ... ng-model='data.favoriteThing' ng-options='thing.name for thing in data.things'></select>
</div>
$scope.data.people = [{
name: 'Tom',
id: 1,
favorite_thing_id: 1
}, {
name: 'Jill',
id: 2,
favorite_thing_id: 3
}];
$scope.data.things = [{
name: 'Snails',
id: 1
}, {
name: 'Puppies',
id: 2
}, {
name: 'Flowers',
id: 3
}];
Do I need to set up a service and add watches, or is there a [good] way to use the favorite_thing_id directly in the select?
Change the second select to this:
<select ng-show='data.selectedPerson' ng-model='data.selectedPerson.favorite_thing_id'
ng-options='thing.id as thing.name for thing in data.things'></select>
Adding the thing.id as to the ng-options will allow you to select the data.things entries based on their id's instead of their references. Changing the ng-model to data.selectedPerson.favorite_thing_id will make angular automatically change to the correct option based on selectedPerson.favorite_thing_id.
jsfiddle: http://jsfiddle.net/bmleite/4Qf63/
http://jsfiddle.net/4Qf63/2/ does what I want - but it's pretty unsatisfying.
$scope.$watch(function() {
return $scope.data.selectedPerson;
}, function(newValue) {
if (newValue) {
$scope.data.thing = $filter('filter')($scope.data.things, {id: newValue.favorite_thing_id})[0];
}
})
I'd like to see all of that be possible from within the select statement.
Maybe I'll try to write a directive.
association = {key: matchValue}
So that I can do
<select ... ng-model='data.thing' ng-options='t.name for t in data.things' association='{id: "data.selectedPerson.favorite_thing_id"}'></select>