Have code:
<tr data-ng-repeat="item in data.items">
<td>{{item.Id}}</td>
<td>
<div>
{{ data.items[$index].selectedBusinessType.id }}
{{ data.items[$index].businessTypes[$index].id }}
<select ng-options="businessType.name for businessType
in item.businessTypes track by businessType.id"
data-ng-model="item.businessTypes.id == item.selectedBusinessType.id">
</select>
</div>
</td>
</tr>
In div models result is ok, but dropdown still didn't work
DropDown without value screen
Scope data from back
Can i get some solution what i doing wrong?
You will probably need filter. Try something like: (plunker: https://next.plnkr.co/edit/DiInzWMC2k8WZzuH)
<select class="form-control" ng-model="$scope.data.items[0].selectedBusinessType.id" ng-options="businessType.name for businessType in item.businessTypes | filter:doFilter(item.selectedBusinessType)">
</select>
And in controller:
$scope.doFilter = function(id) {
console.log("selectedId:" + Object.values(id))
return function(value, index, array) {
console.log(value.id)
if(value.id == Object.values(id))
return true;
}
};
Relate to the answer in https://stackoverflow.com/a/39635805/4952634
On angularJs version 1.5 work option like this:
Plunk - Use angularJs 1.5x
<select class="form-control" ng-model="data.items[$index].selectedBusinessType.id"
ng-disabled="item.CanChangeBusinessType"
ng-change="changeBusinessType(item, selectedBusinessType.id)">
<option ng-repeat="businessType in item.businessTypes" ng-value="businessType.id">
{{businessType.id}}
</option>
</select>
But this don't work on version 1.4+.
Plunk - Use angularJs 1.4x
<div>
<select class="form-control" ng-model="data.items[$index].selectedBusinessType.id"
ng-disabled="item.CanChangeBusinessType"
ng-change="changeBusinessType(item, selectedBusinessType.id)">
<option ng-repeat="businessType in item.businessTypes" ng-value="businessType.id">
{{businessType.id}}
</option>
</select>
</div>
Second worked option - use ng-option:
Ng-Option using
<select class="form-control" ng-model="item.selectedBusinessType"
ng-options="option.id as option.name for option in data.businessTypes"
ng-disabled="item.CanChangeBusinessType"
ng-change="changeBusinessType(item, item.selectedBusinessType, '{{item.selectedBusinessType}}')">
<option value="">-- Не указан --</option>
</select>
Related
Does anyone know how to set up an initial default option in an Angularjs Select?
"myMapByCmd" below is a
LinkedHashMap<String, List<String>>
and so the "value" in item as item for item in value track by $index" is a List<String>.
If I put "Select value" first in the List from the back end, the selector initially shows/selects the last item in the list.
Man there must be a simple way to do this (Damn Angular is so fiddelly !)
<table>
<tr ng-repeat="(key,value) in myMapByCmd">
<td><label>{{key}} Title:</label></td>
<td>
<select name="my_val_sel"
ng-init="mycommand.myValue[$index] = value[0]"
ng-model="mycommand.myValue[$index]"
ng-options="item as item for item in value track by $index"
ng-change="changeMyValue()">
</select>
</td>
</tr>
</table>
if I do this it shows last and unselected...
<select name="my_val_sel" ng-model="mycommand.myValue[$index]"
ng-options="item as item for item in value track by $index"
ng-change="changeMyValue()">
<option value="" ng-selected="selected">FACK</option>
</select>
the myMapByCmd JSON looks like:
{
"ONE": [
"my-one",
"my-two",
"my-three"
]
}
Thanks!
Based on data its using, I have created demo here. If format of data is same and you are looking for similar result then there is no need to use track by $index.
HTML
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="(key,value) in myMapByCmd">
<td><label>{{key}} Title:</label></td>
<td>
<select name="my_val_sel"
ng-init="mycommand.myValue[$index] = value[0]"
ng-model="mycommand.myValue[$index]"
ng-options="item as item for item in value"
ng-change="changeMyValue()">
</select>
</td>
</tr>
</table>
</div>
JS
var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', function($scope) {
$scope.myMapByCmd = { "ONE": [ "my-one", "my-two", "my-three" ],
"TWO": [ "my-one", "my-two", "my-three" ],
"THREE": [ "my-one", "my-two", "my-three" ]}
}]);
Add an empty value options inside select element. JsFiddle
<select ng-options="...">
<option value="">Select Value</option>
</select>
As an example, this is what I use:
<select
ng-model="record.id"
ng-options="obj.id as obj.name for obj in page_list"
>
<option ng-show="record.id == 0"
value="">-- Choose Page --
</option>
</select>
JSFiddle
Future readers try this
<select ng-model="sel.myvar" ng-options="opt.label for opt in sel.myoptions">
<option value="">-- choose an option --</option>
</select>
For more details , please refer here.
I have a problem when I change the value of one dropdown on ng-change. It will changes the other dropdown value also even both dropdown ids are different.
anyone knows why its happening?
Below is my code:
<select class="form-control" id="Billable{{$index}}" ng-init="invoice.source_item=''" ng-model="invoice.source_item" ng-change="BillableItemDetails(invoice.source_item,$index)">
<option class="ng-binding" value="">Select Billable Item...</option>
<option class="ng-binding" ng-repeat="BillableItem in BilableItemsList" value="{{BillableItem.id}}">{{BillableItem.name}}</option>
</select>
use different ng-model variable with different dropdown
Here is Plnkr
HTML
<select ng-model="dd1_Value" ng-change="changedd(ddValue.key)">
<option ng-repeat="d in dd track by d.id">{{d.name}}</option>
</select>
<p>DropDown 1 : {{dd1_Value}}</p>
<select ng-model="dd2_Value">
<option ng-repeat="d in dd track by d.id">{{d.name}}</option>
</select>
<p>DropDown 2 : {{dd2_Value}}</p>
Controller
app.controller('MainCtrl', function($scope) {
$scope.dd = [
{id:1,name:'a'},
{id:2,name:'b'},
{id:3,name:'c'},
{id:4,name:'d'},
{id:5,name:'e'},
{id:6,name:'f'}
]
});
Change the value of ng-model="invoice.source_item" to a unique scope variable for each DropDown.
This is my HTML code
<select id="drplist" ng-model="node.field.name" data-nodrag class="form-control" ng-change="currentColumnInfo(node.field.name,Item.Type,formname)">
<optgroup label="{{primaryObjectName}}">
<option ng-repeat="Item in columnsList" value="{{Item.name}}" id="{{Item.name}}" ng-selected="true">{{Item.name}}</option>
</optgroup>
<optgroup label="{{object.formName}}" ng-repeat="object in secondaryObjectList">
<option ng-repeat="Item in object.fields" value="{{Item.name}}" id="{{Item.name}}">{{Item.name}}</option>
</optgroup>
</select>
I am getting node.field.name, item.Type, and formname as undefined when this ng-change function ng-change="currentColumnInfo(node.field.name,Item.Type,formname)" fires; can anybody help me?
You can't reference Item outside of the ng-repeat loop.
I think what you need to do is transform your data structure for columnsList and object.fields into one data structure, and use the label group by group for (key, value) in object expression for ng-options
I am creating a list of <select>'s with ng-repeat, there is a item.quantity that I need to be selected in each select in the list, I have tried several ways without success. Any help would be appreciated.
<div ng-repeat="item in items">
<select ng-model="selCartQuantity">
<option index="1" ng-selected="item.quantity=='1'">1</option>
<option index="2" ng-selected="item.quantity=='2'">2</option>
<option index="3" ng-selected="item.quantity=='3'">3</option>
<option index="4" ng-selected="item.quantity=='4'">4</option>
<option index="5" ng-selected="item.quantity=='5'">5</option>
</select>
</div>
in your controller you put the following code (of course you change $scope.items to your actual object )
$scope.items = [{name:'aaaaa'},{name:'bbbbb'}];
$scope.options= [1,2,3,4,5];
$scope.items.forEach(function(item,index){
item.selCartQuantity= $scope.options[0];
});
and in the html markup you put the following
<div ng-repeat="item in items">
<select ng-model="item.selCartQuantity" ng-options="option for option in options"></select>
</div>
`
I would reccomend checking out the angular select driective, as you shouldn't have to do the ng-repeat at all. The select directive will automatically set the selected option to be what you have in your model.
<select ng-model="item.value" ng-options="item.name for item in items">
</select>
The above will populate select option in AngularJS, but how can I add selected if my condition is met?
I want to do something like this:
<select ng-model="item.value" ng-options="item.name for item in items" if="item.name == someValueToCheckAgainst" selected endif>
</select>
Obviously the above is wrong, but I was trying to search for this to see if it is possible to do.
This is items
var items = [ 'a', 'b', 'c' ];
var someValueToCheckAgainst = 'b';
so my menu should be like this
<select ng-model="item.value">
<option value="a">a</option>
<option value="b" selected>a</option>
<option value="c">a</option>
</select>
Just figured this out
<select ng-model="form.model">
<option ng-selected="{{item == valueToCheckAgainst}}"
ng-repeat="item in items"
value="{{item}}">
{{item}}
</option>
</select>
For me this statement makes no sense.
<select ng-model="item.value" ng-options="item.name for item in items"> </select>
ng-model is current value (bound model). If your 'item' looks like ’{ value, name }' than you should define your 'select' as
<select ng-model="someValueToCheckAgainst" ng-options="item.value as item.name for item in items"> </select>
The selected option is defined by the value of the ng-model attribute. For further information you can take a look at the official documentation https://docs.angularjs.org/api/ng/directive/select.
I recommend to use ng-option directive instead of ng-repeat for select boxes, beacuse ng-option is specifically created for select box and handles options in best way. And how we can set a default or conditional option value selected in ng-option directive is using ng-init directive with it like this:
<select ng-model="item.value"
ng-options="item.name for item in items"
ng-init="condition ? item.value = items[opt index] : item.value = items[0]">
</select>