How to select an option in a dropdown list angularjs - javascript

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];

Related

How can we use the "name" or "id" attribute values as the data property in Vue JS?

I am working on an SPA application where I have a list of data variables that are used as the <option> tags in the dropdown. I want to navigate to another page on the #change event of the dropdown therefore I want to use either the id or name of the select command as the name of the data property. Here is what I mean:
Here is what I have in the data function:
data(){
return {
participants: [
{ value: 0, linkText: '', linkTerm: 'Select' },
{ value: 1, linkText: '/meetings/participants/create', linkTerm: 'Add New' },
{ value: 2, linkText: '/meetings/participants', linkTerm: 'All Participants' },
],
positions: [
{ value: 0, linkText: '', linkTerm: 'Select' },
{ value: 1, linkText: '/meetings/positions/create', linkTerm: 'Add New' },
{ value: 2, linkText: '/meetings/positions', linkTerm: 'All Positions' },
],
}
}
Here is the select tag where I use the above data variables as the <option> tag:
<select name="participants" id="participants" class="select-field" #change="changeRoute($event)">
<option v-for="p in participants" :value="p.value">{{ p.linkTerm }}</option>
</select>
Now I want to have one function changeRoute($event) from which I will navigate to different pages, therefore I want to use the id or name value as the data property, here is the function:
methods:{
changeRoute($event){
var name = $event.target.name;
var value = document.getElementById($event.target.id).value;
}
}
Here in the above function I want to use the name as the data property as below:
I want to write this:
this.name[value].linkText;
And because name here is the name of the tag which is actually participants so the above line of code should mean something like this:
this.participants[value].linkText
And that should return the linkText of the participants object of the data function.
Any help is appreciated in advance.
Change the below line
this.name[value].linkText;
to
this[name][value].linkText;

Ng-selected: Select dropdown in controller -- What am I doing wrong?

Okay, I have an Angular powered CRUD system here, and for the most part everything seems to be working right except for the dropdown. This was originally written for SQL but I have an all JSON version here http://codepen.io/StuffieStephie/pen/QEaGPY
JSON is formatted as such
$scope.names = [
{
"id": "26",
"name": "Lena Oxton",
"email": "tracer#overwatch.com",
"phone": "8003005000",
"status": "BANNED",
"created": "2016-07-12 03:42:50",
"unix": "1468294848273"
}, {//MORE objects...
}];
I have a function called 'readOne' which puts the values of the JSON object I want to edit in a modal form.
$scope.readOne = function(item){
$scope.entry = item;
$scope.entry.name = item.name;
$scope.entry.email = item.email;
$scope.entry.phone = item.phone;
$scope.entry.status = item.status;
// show modal
$('#modal-volunteer-form').openModal();
}; // END READ ONE
This all works fine EXCEPT for the status (a dropdown) which doesn't get put into the form.
Here's the select
<!-- STATUS SELECT FOR CREATE / UPDATE MODAL FORM -->
<select name="status" ng-model="entry.status">
<option ng-selected="{{option.value == entry.status}}" ng-repeat="option in options" value="{{option.value}}">{{option.displayName}}</option>
</select>
Here's the options array
$scope.entry = { };
$scope.entry.status = 'APPLIED';
$scope.options = [{
value: 'APPLIED',
displayName: 'APPLIED'
}, {
value: 'APPROVED',
displayName: 'APPROVED'
}, {
value: 'WITHDRAWN',
displayName: 'WITHDRAWN'
}, {
value: 'DISMISSED',
displayName: 'DISMISSED'
}, {
value: 'BANNED',
displayName: 'BANNED'
}];
You'll notice that I successfully set the status to 'APPLIED' in the controller, but I can't seem to set it again. Am I using ng-selected correctly?

Angularjs Select Option set to first item did not work

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>

Binding nested select element does not work in angularjs

I have two select dropdowns, the first being the parent of the second. I am able to successfully bind the parent select back to a 'selected item'. But I am unable to bind the child select using ng-model back to the selected parent. I couldn't quite get my example working as I am new to angular but hopefully you get the picture.
$scope.model = {};
$scope.model = {
categories: [{
id: 1,
name: 'Ford',
subCategory: ['focus', 'ranger', 'F150'],
filterValue: ''
}, {
id: 2,
name: 'Honda',
subCategory: ['accord', 'civic', 'pilot'],
filterValue: ''
}],
selectedCategory: {}
}
$scope.categoryChange = function() {
console.dir($scope.selectedCategory);
}
$scope.subCategoryChange = function() {
console.dir($scope.selectedCategory.subCategory);
}
var init = function() {
$scope.model.selectedCategory = $scope.model.categories[0];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<select ng-model="model.selectedCategory" ng-options="category as category.name for category in model.categories" data-ng-change="categoryChange()"></select>
<select ng-model="model.selectedCategory.filterValue" data-ng-options="subCategory for subCategory in model.selectedCategory.subCategory" data-ng-change="subCategoryChange()"></select>
For me it's working!
Maybe you forgot to put ng-app & ng-controller
See This --> Sample

How do I set the value for a select statement?

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>

Categories