I have predefined scope values:
$scope.synchronizationStates =
[
true,
false
];
And i have defined select:
<select class="form-control" data-ng-model="projectDetail.synced" data-ng-options="synced for synchronizationState in projectDetail.synchronized">
</select>
I would like to have for state false display preselected value "NOT_SYNCED" and for true "SYNCED" And also change state value if value is changed by user.
How can I do it please using AngularJs?
Thanks for any advice.
In controller use :
$scope.synchronizationStates = [
{text:'not synced',value:false},
{text:'synced',value:true},
]
and in html
<select ng-model="selected" ng-options="value.value as value.text for value in synchronizationStates"></select>
working plunker here a link!
I think its better for you to use something like this
ng-options="e as e for e in synchronizationStates "></select>
and maybe make each element in the array an object with string for the name and true or false for the value
Related
I want to determine the ascending/descending property of the ng-repeat by passing a value coming from a dropdown box.
I defined a variable called "asdc" whose value is determined by a dropdown box. This variable should determine if the table will be sorted ascending or descending. The variable already created in the AngularJS controller so I don`t post it here. I am pasting the codes below. It does not work this way. I am wondering what I am missing.
This is the table that I want to sort.
<tr ng-repeat="technology in technologies | limitTo: rowlimit | orderBy: sortby : adsc" >
<td>{{technology.name | uppercase}}</td>
</tr>
This is the drowdown box. It defines the value of adsc as true or false and passes the value to "adsc".
<select ng-model="adsc">
<option value="true">Asc</option>
<option value="false">Dsc</option>
</select>
Use ng-options to bind to something other than a string:
In controller:
$scope.directions = [
{
value: false,
label: 'Asc'
},
{
value: true,
label: 'Desc'
}
];
In view:
<select name="direction" ng-model="adsc"
ng-options="direction.value as direction.label for direction in directions">
</select>
Here's a plunkr demonstrating its use.
Also, note that passing true will sort in descending order, not ascending.
So I have an simple array values = [0, 1] and it will be supplied to
<select ng-model="myValue" ng-options="v for v in values "></select>
After this, i will have a dropdown list having two options: 0 and 1.
But what I want are:
In the web page, I don't want to show 0 or 1, but false and true.
Once a user select an option (either false or true), the real model myValue should be 0 or 1, not false or true.
How can I do this?
Flat array initialisation won't let you do this with standard ng-options as the label is the first part of the ng-options initialisation.
ng-options="label for v in values"
To do this properly, your options would be better formatted like so:
$scope.values = [
{ label : 'true', value: 1 },
{ label : 'false', value: 0 }
];
This would allow you to define the option label from the object in the for loop
<select ng-model="myValue" ng-options="v as v.label for v in values"></select>
If you want/have to stick with your current setup you could do something along the lines of:
var initialValues = [0,1];
$scope.values = [];
// Assuming ES5
initialValues.forEach(function(value, index)
{
$scope.values.push({
label : (!!value).toString(),
value : value
});
});
And modify the HTML to be as above.
According to the documentation for ngOptions, you can use an expression of the form select as label for value in array, in which label can be any correct AngularJS expression. You can use, for instance:
<select
ng-model="myValue"
ng-options="value as (value ? 'true' : 'false') for value in values"
></select>
Fiddle
This can be acceptable when you have just a few number of possible values, but it becomes quickly unreadable if your array grows larger:
<select
ng-model="myValue"
ng-options="value as (value === 1 ? 'true' : value === 0 ? 'false' : value === -1 ? 'undefined') for value in values"
></select>
In such a case, I strongly advise you to use an object, as suggested by David Barker.
How can I get other properties from loaded json in dropdown / ng-options
On ng-change I also like to pass selected object's campaignType.
How would I able to do that?
My View is looking like this
<div ng-app>
<div ng-controller="cCtrl">
<select ng-model="campaign" ng-options="c.id as c.name for c in campaigns" ng-change="search2(c.campaignType)">
<option value="">-- choose campaign --</option>
</select>
</div>
</div>
My Controller is looking like this
function cCtrl($scope) {
$scope.campaigns = [{
"custID": 1,
"custName": "aaa ",
"msgID": 3,
"msgName": "Email Test Msg",
"id": 2,
"name": "Email Test Campaign",
"description": "Test Campaign",
"campaignType": "Email",
"created": "1374229715",
"isActive": 1,
"isDeleted": 0
}];
$scope.search2 = function (campaignType) {
alert(campaignType); // not working
alert($scope.campaign.campaignType); // not working
//console.log($scope.campaign.campaignType);
}
}
http://jsfiddle.net/webtheveloper/Qgmz7/8/
Instead of passing in a property, you can pass the selected object into the function like this
<select ng-model="campaign" ng-options="c.name for c in campaigns" ng-change="search2(campaign)">
Working Demo
Check this out: http://jsfiddle.net/Qgmz7/9/
You are not in an ngRepeat context. ngOptions works totally different.
ngModel on a <select> will get the value of the <option>, not the whole object. Again, you are not inside an ngRepeat, you don't have access to your objects.
No need to pass the value as parameter, you can get it from $scope. As a matter of fact you don't need ngChange either, you can just $scope.$watch('campaign', ...)
So
$scope.search2 = function () {
console.log($scope.campaign);
}
You can also try it this way (Hack we can say),
<select ng-model="campaign" ng-options="c.id as c.name for c in campaigns" ng-change="search2(campaign,campaigns)">
<option value="">-- choose campaign --</option>
</select>
Basically what this piece of code will do is that it will just pass ng-model along with the whole dropdown list to ng-change.
So in search2 Function, you can just search that ng-model value into that list and get your desired object.
Fiddle for reference : https://jsfiddle.net/vaibhavgavali92/7b7xdyzj/18/
In some cases such as just to display the member value corresponding item selected would not require a call to Controller function. For example if you want to display the campaign type corresponding to selected campaign, it can be written as follow.
<select ng-model="campaign" ng-options="c.name for c in campaigns">
...
<tr><td>Campaign Type:</td><td>{{campaign.campaignType}}</td></tr>
<tr><td>Campaign Description:</td><td>{{campaign.description}}</td></tr>
I have an object as below. I have to display this as a drop-down:
var list = [{id:4,name:"abc"},{id:600,name:"def"},{id:200,name:"xyz"}]
In my controller I have a variable that carries a value. This value decided which of the above three items in the array will be selected by default in the drop-down:
$scope.object.setDefault = 600;
When I create a drop-down form item as below:
<select ng-model="object.setDefault" ng-options="r.name for r in list">
I face two problems:
the list is generated as
<option value="0">abc</option>
<option value="1">def</option>
<option value="2">xyz</option>
instead of
<option value="4">abc</option>
<option value="600">def</option>
<option value="200">xyz</option>
No option gets selected by default even though i have ng-model="object.setDefault"
Problem 1:
The generated HTML you're getting is normal. Apparently it's a feature of Angular to be able to use any kind of object as value for a select. Angular does the mapping between the HTML option-value and the value in the ng-model.
Also see Umur's comment in this question: How do I set the value property in AngularJS' ng-options?
Problem 2:
Make sure you're using the following ng-options:
<select ng-model="object.item" ng-options="item.id as item.name for item in list" />
And put this in your controller to select a default value:
object.item = 4
When you use ng-options to populate a select list, it uses the entire object as the selected value, not just the single value you see in the select list. So in your case, you'd need to set
$scope.object.setDefault = {
id:600,
name:"def"
};
or
$scope.object.setDefault = $scope.selectItems[1];
I also recommend just outputting the value of $scope.object.setDefault in your template to see what I'm talking about getting selected.
<pre>{{object.setDefault}}</pre>
In View
<select ng-model="boxmodel"><option ng-repeat="lst in list" value="{{lst.id}}">{{lst.name}}</option></select>
JS:
In side controller
$scope.boxModel = 600;
You can do it with following code(track by),
<select ng-model="modelName" ng-options="data.name for data in list track by data.id" ></select>
This is an old question and you might have got the answer already.
My plnkr explains on my approach to accomplish selecting a default dropdown value. Basically, I have a service which would return the dropdown values [hard coded to test]. I was not able to select the value by default and almost spend a day and finally figured out that I should have set $scope.proofGroupId = "47"; instead of $scope.proofGroupId = 47; in the script.js file. It was my bad and I did not notice that I was setting an integer 47 instead of the string "47". I retained the plnkr as it is just in case if some one would like to see. Hopefully, this would help some one.
<select ng-init="somethingHere = options[0]" ng-model="somethingHere" ng-options="option.name for option in options"></select>
This would get you desired result Dude :) Cheers
Some of the scenarios, object.item would not be loaded or will be undefined.
Use ng-init
<select ng-init="object.item=2" ng-model="object.item"
ng-options="item.id as item.name for item in list"
$scope.item = {
"id": "3",
"name": "ALL",
};
$scope.CategoryLst = [
{ id: '1', name: 'MD' },
{ id: '2', name: 'CRNA' },
{ id: '3', name: 'ALL' }];
<select ng-model="item.id" ng-selected="3" ng-options="i.id as i.name for i in CategoryLst"></select>
we should use name value pair binding values into dropdown.see the
code for more details
function myCtrl($scope) {
$scope.statusTaskList = [
{ name: 'Open', value: '1' },
{ name: 'In Progress', value: '2' },
{ name: 'Complete', value: '3' },
{ name: 'Deleted', value: '4' },
];
$scope.atcStatusTasks = $scope.statusTaskList[0]; // 0 -> Open
}
<select ng-model="atcStatusTasks" ng-options="s.name for s in statusTaskList"></select>
I could help you out with the html:
<option value="">abc</option>
instead of
<option value="4">abc</option>
to set abc as the default value.
I have an javascript object as follows in my controller:
$scope.options = [
{
"actualValue": "age",
"displayValue": "Age"
},
{
"actualValue": "maiden",
"displayValue": "Maiden Name"
}
];
Now, I am displaying a select element in which the options of the element will be the values in the "displayValue" property written above:
<select ng-options="entry.displayValue for entry in options" ng-model="biodata">
<options>-- Select a BioData Option --</option>
</select>
Now, my problem is that the ng-model for the select element above when the user select a value from the dropdown is the "displayValue" property. I wish that the ng-model be the "actualValue" property.
How can I achieve this?
<select ng-options="entry.actualValue as entry.displayValue for entry in options"></select>
Fiddle: http://jsfiddle.net/rzV65/
Already answered here: How do I set the value property in AngularJS' ng-options?