I have a simple select element and I am trying to initialize the value but for some reason it is failing, i.e. not taking the init value
HTML
<select class="select-form-control"
ng-model="lossGainProb"
ng-options="item.display for item in possibility track by item.value"
ng-init="EventDetails.lossGainProb">
JavaScript
$scope.possibility = [{
display: '0%',
value: 0
}, {
display: '5%',
value: 5
}];
$scope.EventDetails.lossGainProb = 5;
Based on the given code I have created small working demo here
<div ng-app="myApp" ng-controller="myCtrl">
<select class="select-form-control" ng-model="lossGainProb"
ng-options="item.value as item.display for item in possibility">
</select>
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.possibility =[ {
display : '0%',
value : 0
}, {
display : '5%',
value : 5
}];
$scope.lossGainProb = $scope.possibility[1].value;
});
You need the tracked item for the list tracked by angular. Try this:
$scope.possibility = [{
display: '0%',
value: 0
}, {
display: '5%',
value: 5
}];
$scope.EventDetails.lossGainProb = $scope.possibility.filter(function(item){ return item.value === 5})[0];
Working Codepen http://codepen.io/gpincheiraa/pen/bpbMom
There are two mistakes I see:
You are using ngInit incorrectly. It does not specify the initial binding for the ngModel directive, it is an expression which is evaluated against the scope after the scope is initialized. To specify initial model bindings, you need something like
<select ng-init="lossGainProb = EventDetails.lossGainProb"></select>
Another (better) approach is to specify this in your controller directly, like
$scope.lossGainProb = $scope.EventDetails.lossGainProb;
Your ngModel is bound to the entire "possibility" object rather than just the value property. I am assuming that you want just the value to be your model value. In this case, you should set ngOptions like
<select ng-options="item.value as item.display for item in possibility"></select>
This specifies that ngModel should be bound to item.value with item.display being used as the label.
Putting these together, your select should look like
<select class="select-form-control"
ng-model="lossGainProb"
ng-options="item.value as item.display for item in possibility"
ng-init="lossGainProb = EventDetails.lossGainProb">
</select>
Here is a working Plunker.
This will work without using ng-init - initializing in the controller:
$scope.lossGainProb = {};
$scope.lossGainProb.value = 5;
ng-init should not be used if possible - https://docs.angularjs.org/api/ng/directive/ngInit.
an alternate approach would be this one:
<select class="select-form-control" ng-init="lossGainProb = possibility[1].value" ng-model="lossGainProb" ng-options="item.value as item.display for item in possibility"> </select>
Related
I have a element , which I would like to bind with a model to get/set the value and to populate it from a list using angular 1
The way I have it, I am able to bind it from UI to model, not vice versa, what am I doing wrong?
HTML:
<div ng-controller="MyCtrl">
<select class="form-control"
ng-options="o as o.prop for o in brands"
ng-model="selectedBrands"
multiple="multiple"
>
</select>
</div>
JS:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.brands = [{
prop: 1
}, {
prop: 2
}, {
prop: 3
}];
$scope.selectedBrands = [{
prop: 2
}];
}
JSFiddle:
http://jsfiddle.net/4L8b7cke/
Reuse $scope.brands elements, do not create new for selected items, because ngModel watches the model by reference.
$scope.selectedBrands = [$scope.brands[0],$scope.brands[1]];
Update:
By default, ngModel watches the model by reference, not value. This is important to know when binding the select to a model that is an object or a collection.
From ngOptions documentation
I'm trying to get a select box working in Angular. The problem I'm experiencing is to do with ng-init and setting it's default value from an object which is created during runtime. Heres my code:
<select
ng-model="settings.editing.panel.data.production_company"
ng-change="settings.editing.panel.data.production_company = selectValue"
ng-init="selectValue = settings.editing.panel.data.production_company"
>
<option
ng-repeat="(key, value) in lists.production_companies"
value="{{key}}"
ng-selected="{{selectValue}}"
>
{{value}}
</option>
</select>
"lists.production_companies" is a simple key-value array of names, populated during initial page render, updated by ajax.
The object "settings.editing.panel.data" starts its life as NULL, but later is loaded with a correctly formatted object which contains the property "production_company".
I have found setting ng-init to something like "ng-init="selectValue = 3" works fine. Setting a $scope.test = 3, then setting "ng-init="selectValue = test" works fine too.
However, my dynamic value does not work. How can I use my dynamically created object to set the value of this select box during runtime with the set-up I have?
<select
ng-model="settings.editing.panel.data.production_company"
ng-options = "option as option.keyName for option in list.production_companies"
> <!--set keyName equal to your object's key-->
</select>
Then in your controller
$scope.settings.editing.panel.data.production_company = list.production_companies[0] // Or which value you want to assign
You question confused me somehow. The following snippet is a working one, is that what you want?
'use strict';
angular.module('DemoApp', []);
angular.module('DemoApp').controller('DemoCtrl', ['$scope', function($scope){
$scope.lists={
production_companies: { "0": "prod 1", "1":"prod_2" },
};
$scope.settings={
editing: {
panel: {
data: null
}
}
};
$scope.setData=function(data){
$scope.settings.editing.panel.data={
production_company: data
};
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="DemoApp" ng-controller="DemoCtrl">
<select ng-model = "settings.editing.panel.data.production_company">
<option ng-repeat = "(key, value) in lists.production_companies" value = "{{key}}">{{value}}</option>
</select>
<div>You select: {{settings.editing.panel.data.production_company}}</div>
<button ng-click="setData('0')">Set Data to Prod1</button>
<button ng-click="setData('1')">Set Data to Prod2</button>
</div>
In my circumstances I was able to change my backends data format to set an object like:
{"id": 1, "name":"prod comp 1"}
and then change my select model accordingly. In hindsight I needed this for the ID anyway.
<select
ng-model="settings.editing.panel.data.production_company"
>
<option
ng-repeat="option in settings.lists.production_companies"
value="{{option.id}}"
ng-selected="{{option.id}} == settings.editing.panel.data.production_company"
>
{{option.name}}
</option>
</select>
I have the following in my view
<div>
<select ng-model="obj.arr[otherObj.variable]" ng-change="otherObj.variable=SOMETHING">
<option ng-repeat="label in obj.arrs">{{label}}</option>
</select>
</div>
Without the ng-change attribute, this code does what I want when otherObj.variable is one of the indexes of the obj.arr - it selects the correct item in the list.
What I want in addition to this is to set otherObj.variable to the index of the array item that is picked when the dropdown variable is changed. So, if the second value in the dropdown is picked then otherObj.variable should be set to 1. I tried to do this with a
ng-change="otherObj.variable=SOMETHING"
Problem is., I don't know what that SOMETHING should be. Am I doing this right?
EDIT
My requirements are
Select the top option in the dropdown by default
select the appropriate item in the array depending on the value of otherObj.variable (this gets set by some external code so if I come to the page with this value set then I want the correct option selected)
Make sure otherObj.variable is updated if I change the value in the dropdown.
angular.module('selects.demo', [])
.controller('SelectCtrl', function($scope){
$scope.values = [{
id: 1,
label: 'aLabel',
}, {
id: 2,
label: 'bLabel',
}];
$scope.selectedval = $scope.values[0];
});
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<div ng-app="selects.demo">
<div ng-controller="SelectCtrl">
<p>Using ngOptions without select as:</p>
<select ng-model="selectedval" ng-options="value.label for value in values"></select>
<p>{{selectedval}}</p>
<p>Using ngOptions with select as statement: (this will return just the id in the model)</p>
<select ng-model="selectedval2" ng-options="value.id as value.label for value in values"></select>
<p>{{selectedval2}}</p>
</div>
</div>
Sorry if my comment was a little cryptic. Select elements like other form elements are actually directives in AngularJS, so they do a lot of stuff for you automatically. You don't need to use an ngChange to populate the ngModel associated with your select element. AngularJS will handle that for you.
Also, you can use ngOptions instead of ngRepeat on select elements to generate the values automatically on options.
Assuming that you have an object with values:
$scope.values = [{
id: 1,
label: 'aLabel',
}, {
id: 2,
label: 'bLabel',
}];
You would write:
<select ng-model="selectedval" ng-options="value.label for value in values"></select>
Now your ngModel is going to be bound to the selected element. It will be set with the value of the object that was chosen. If you add {{selectedval.id}} to your view, it will display the id of the selected element.
If you want to set the value to the first item, in your controller, you would add:
$scope.selectedval = $scope.values[0];
If you want to update some property on $scope.values based on the selected value, you could use something like:
$scope.addActiveProp = function() {
var selected = $scope.values.filter(function(e) { return e == $scope.selectedval; });
selected.active = true;
}
And then run the addActiveProp fn in ngChange on the select.
Please give a try with below code
<select ng-model="obj.arr[otherObj.variable]" ng-change="otherObj.variable=key" ng-options="key as value for (key , value) in obj.arrs"></select>
<select class="select" data-ng-model="sites.webSites.addable.languages"
ng-options="language as language.label for language in languages" >
</select>
$scope.languages = [
{
value : 'lang_en',
label : 'English-en'
},
{
value : 'lang_es',
label : 'Spanish-es'
},
];
Clicking on a button I have to make the item selected
I have tried like this
var sitevalue = 'lang_es'//dynamic
$('.select').val(sitevalue);
But it is not working ,please suggest.
Change your select to something like this:
<select data-ng-model="sites.language"
ng-options="language.value as language.label for language in languages" ></select>
Then this should work inside your controller:
sites.language = 'lang_es'
Here is a working jsfiddle
Update:
When you are writing language as language.label for ... you are telling angular to map ng-model to object like { value : '...', label : '...' }. Which would be tracked per reference, means you have to assign to ng-model exacltly the same instance that you specified. Here is jsfiddle from angular team illustrating this.
You can use simple assignments to value propery to cange selected value by using this inside ng-options: language.value as language.label for ...
And you don't want to write jquery selectors or manipulate DOM, try avoid $('.select').val(sitevalue); when using angular. Use native js-models instead and rely on framework to do the rest.
Your model should be set to the exact object (by reference) that you would like to select, not only to the value.
Make you HTML like this:
<body ng-controller="TestCtrl">
<select class="select" ng-options=" language.label for language in languages" ng-model="selectedValue"></select>
<button ng-click="selectedValue = defaultValue">Select Default</button>
</body>
and your controller like this:
function TestCtrl($scope) {
$scope.languages = [
{
value : 'lang_en',
label : 'English-en'
},
{
value : 'lang_es',
label : 'Spanish-es'
},
];
$scope.selectedValue = {};
$scope.defaultValue = $scope.languages[1];
}
This will do the job. Working plunkr: http://plnkr.co/edit/8HrQUGMx4jGmJv3fbdDq?p=preview
$scope.sites.webSites.addable.languages = 'lang_es';
selected value is associated with data-ng-model
ng-options should be "language.value as language.label for language in languages".
data-ng-model (or just ng-model) should be "selectedLanguageValue".
In the controller, get the value of $scope.selectedLanguageValue.
I am unable to update value of select from AngularJs.
Here is my code
<select ng-model="family.grade" >
<option ng-repeat="option in options" value='{{option.id}}'>{{option.text}}</option>
</select>
Here are the options which i am using to populate my select
var options = [{text:'Pre-K',id:'Pre-K'},
{text:'K',id:'K'},
{text:'1',id:'1'},
{text:'2',id:'2'},
{text:'3',id:'3'},
{text:'4',id:'4'},
{text:'5',id:'5'},
{text:'6',id:'6'},
{text:'7',id:'7'},
{text:'8',id:'8'},
{text:'+',id:'+'}];
Here is mu js code.
$scope.$watch("family_member.date_of_birth" ,function(newValue, oldValue){
$scope.family.grade = "1"
})
When ever value of family_member.date_of_birth changes it should set they value of select to 1. But this change is not visible on UI.
You should use ngSelected to select the option.
it could be something like this:
<select ng-model="family.grade" >
<option ng-repeat="option in options"
value='{{option.id}}' ng-selected="family.grade==option.id">
{{option.text}}</option>
</select>
Hope this helps.
I think you are looking for the track by clause of ng-options:
<option ng-repeat="option in options track by option.id">{{option.text}}</option>
However, you will still need to supply an object with an id property to set:
$scope.$watch("family_member.date_of_birth" ,function(newValue, oldValue){
$scope.family.grade = { id: "1" }
})
The options array indiviual elements are objects. So the respective ng-model also need to be an object. So even when it is being changed in js, the respective object has to be provided rather than a string.
Sample demo: http://plnkr.co/edit/naYcnID29SPa90co0leB?p=preview
HTML:
JS:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.options = [{text:'Pre-K',id:'Pre-K'},
{text:'K',id:'K'},
{text:'1',id:'1'},
{text:'2',id:'2'},
{text:'3',id:'3'},
{text:'4',id:'4'},
{text:'5',id:'5'},
{text:'6',id:'6'},
{text:'7',id:'7'},
{text:'8',id:'8'},
{text:'+',id:'+'}];
$scope.family = {};
$scope.family_member = {
date_of_birth: '10-Jan-1986'
};
$scope.$watch("family_member.date_of_birth", function(newValue, oldValue) {
$scope.family.grade = $scope.options[2];
});
});