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.
Related
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>
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 have a drop down list consisting of name and address. if name is selected then my list should be sorted with name.
My code is not working properly` Order By
<div class="col-xs-2">
<select class="form-control" ng-change="changedvalue()" ng-model="Tosort.order">
<option value="None">-- Select --</option>
<option ng-model="Tosort.order" value="Name">Name</option>
<option ng-model="Tosort.order" value="Address">Address</option>
</select>
</div>
<li ng-repeat="x in details | filter: Tofilter.country | orderBy:sort.value">
You need to simply use ng-model instead of the ng-change() event. There are some other issues in your code as well like you need to provide ng-model only on the select tag. I think you may need to revisit some angular basics. I've shown how it could work below. the select tag will be bound to "sortBy" and the same is used in the "orderBy" filter
<div class="col-xs-2">
<select class="form-control" ng-model="sortBy">
<option value="None">-- Select --</option>
<option value="Name">Name</option>
<option value="Address">Address</option>
</select>
</div>
<li ng-repeat="x in details | filter: Tofilter.country | orderBy:sortBy">
I see you got lot's of answers while I was still writing my example. Damn you're fast! :)
Anyway, this would be content of your HTML
<body ng-controller="MyCtrl">
<div>
<!-- text input for filtering -->
<label>Country filter</label>
<input type="text" ng-model="countryFilter"></input>
<!-- options to order (filtered) results -->
<label>Order by</label>
<select ng-model="selectedOrder" ng-options="option for option in options"></select>
</div>
<ul>
<!-- show results: filter by country name and order by selected property name -->
<li ng-repeat="detail in details | filter:{country: countryFilter} | orderBy:selectedOrder">{{ detail }}</li>
</ul>
</body>
And this would be related controller
var app = angular.module('plunker', []);
app.controller('MyCtrl', function($scope) {
// order by options
$scope.options = ['country', 'address'];
// all countries
$scope.details = [{
id:1, country:'Country 1', address:'Address C'
},{
id:2, country:'Country 2', address:'Address B'
},{
id:3, country:'Country 3', address:'Address A'
}];
});
For future reference, working plunker here http://plnkr.co/edit/02Y3b7
I'd like to set the ng-class of a optiones-element as active. Unfortunately it doesn't work.
This is my option-menu:
<select>
<option ng-repeat="item in items">{{item}}</option>
</select>
and the item "one" should be active
<select>
<option ng-repeat="item in items" ng-class="{selected: item=='one'}">
{{item}}
</option>
</select>
It doesn't work. Does anyone know how to set the option tag as active?
An example of how it works is this:
<select>
<option>Blue</option>
<option selected>Green</option>
<option>Red</option>
</select>
Below is the right way "select" works in Angularjs, notice the included ng-model directive, if missing it doesn't work.
<select ng-model="selectedItemId" ng-options="item.id as item.name for item in items">
<option value="">-- choose item--</option>
</select>
to make an item of the list active, just set SelectedItemId variable assigned to ng-model at controller side.
$scope.selectedItemId = 1; //the Id belonging to the option to be selected
I see that you want to loop over the options using ng-repeat and then manually select the right option. It is nicer to use the select directive of Angular in that case:
<select ng-model="selectedItem" ng-options="items"></select>
See https://docs.angularjs.org/api/ng/directive/select for more information.
<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>