When I click a button and get the selected schoolclass via:
$scope.selectedSchoolclasses[0] then there is only the schoolclass schoolclassNumber like "7a" but not the Id property.
Why is that? The bound schoolclasses array and its item have Id and schoolclassNumber properties.
Controller
$scope.schoolclasses = schoolclasses;
$scope.selectedSchoolclasses = [];
Html
<div class="col-sm-8">
<select size="5" class="form-control control-label col-sm-6" multiple ng-model="selectedSchoolclasses">
<option class="co-sm-6" ng-repeat="s in schoolclasses">
{{s.schoolclassNumber}}
</option>
</select>
</div>
To be able to store instances of objects, you need to use ng-options:
<select size="5"
class="form-control control-label col-sm-6"
multiple
ng-model="selectedSchoolclasses"
ng-options="s.schoolclassNumber for s in schoolclasses">
</select>
In many cases, ngRepeat can be used on <option> elements instead of ngOptions to achieve a similar result. However, ngOptions provides some benefits such as reducing memory and increasing speed by not creating a new scope for each repeated instance, as well as providing more flexibility in how the <select>'s model is assigned via the select as part of the comprehension expression. ngOptions should be used when the <select> model needs to be bound to a non-string value. This is because an option element can only be bound to string values at present.
(emphasis mine)
Related
I am trying to take value of one expression to another as below:
<label class="col-md-12" ng-repeat="a in filters"> {{a.label}}
<select ng-model="qqq">
<option ng-repeat="f in values " ng-value="{{f.{{a.label}}}}" >
{{f.{{a.label}}}}
</option>
</select>
</label>
I know that not the correct way but just to explain the question exactly I wrote that. Also both Values and filters are two different and independent json objects, So suppose if
{{a.label}}= manufacture
then
{{f.{{a.label}}}} = {{f.manufacture}}
and both the object doesn't have any common attributes
You can use bracket notation to access property like {{f[a.label]}}.
I want to bind a model value to selected item
<select id="hours" ng-model="v.T_Hour">
<option ng-repeat="n in [].constructor(24) track by $index" ng-selected="{{$index==v.T_Hour}}" value="{{$index}}">{{$index>9?$index:"0"+$index}}:00</option>
</select>
I want after the page loads , the value of the model 'v.T_Hour' to be selected in select , i assign the value of the model in the controller, when i view the resulting HTML i see that the value is selected in the HTML code ,but not selected in the select control , and the select control displays an empty item.
Try this
<select
name="name"
id="id"
ng-options="option.name for option in v.data track by option.value"
ng-model="v.selected"
class="form-control inline-forms">
<option value="" selected>{{placeHolder}}</option>
</select>
and in controller
$scope.v = {data:[], selected:{}, placeHolder:""}
$scope.v.data = [{name:"nameOne", value:"valueOne"},{name:"nameTwo", value:"valueTwo"},{name:"nameThree", value:"valueThree"}]
$scope.v.selected = $scope.v.data[0]
$scope.v.placeHolder = "Click to Select"
According Angular documentation ngOption is better way to go than ngRepeat:
Choosing between ngRepeat and ngOptions
In many cases, ngRepeat can be used on elements instead of ngOptions to achieve a similar result. However, ngOptions provides some benefits:
more flexibility in how the 's model is assigned via the select as part of the comprehension expression
reduced memory consumption by not creating a new scope for each repeated instance
increased render speed by creating the options in a documentFragment instead of individually
Specifically, select with repeated options slows down significantly starting at 2000 options in Chrome and Internet Explorer / Edge.
see: https://docs.angularjs.org/api/ng/directive/select
I am getting empty Option field in select tag.
My code is shown below:
openSelectBoxModel="47"
openSelectList=[{id:""47",name:"text"}];
valuekey="id";
titlekey="name";
<select id="reportOpenSelectBoxSingle" size="6" ng-style='selectStyle' class="openSelectBox" ng-model="openSelectBoxModel" ng-change="changeFn()" >
<option ng-selected="openSelectBoxModel===item[valueKey]" ng-repeat="item in openSelectList" id="" ng-value="{{item[valueKey]}}" ng-title="{{item[titleKey]}}" ng-bind="item[titleKey]"></option>
</select>
Please help me to solve this problem.
You should not use ng-selected with ng-model.
The thing to do is to bind the selected item to your ng-model before displaying it.
//Also, instead of ng-repeat, you should use ng-option
As far as performance is regarded : ng-options does not create child scopes for every iteration. When angular performs its digest, your ng-repeat will slow it. If you have a list with hundreds of elements, you will feel a difference.
<select id="reportOpenSelectBoxSingle"
size="6"
ng-style='selectStyle'
class="openSelectBox"
ng-model="openSelectBoxModel"
ng-change="changeFn()" >
<option ng-repeat="item in openSelectList"
value="{{item[valueKey]}}"
title="{{item[titleKey]}}"
ng-bind="item[titleKey]">
</option>
</select>
Furthermore, you need to declare your variables inside a controller :
$scope.openSelectBoxModel="47";
$scope.openSelectList=[{id:"47",name:"text"}];
$scope.valuekey="id";
$scope.titlekey="name";
I am not getting how the ng-model are connected to the ng-repeat options. How can the code below be converted to an ng-repeat? I can get the ng-repeat work but
ng-selected="{{alternative.code == question.answer}}"
is what I don't understand how to do with the ng-options.
<select ng-model="question.answer">
<option ng-selected="{{alternative.code == question.answer}}"
ng-repeat="alternative in question.alternatives"
value="{{alternative.code}}">{{alternative.label}}</option>
</select>
Use the following:
<select ng-model="question.answer"
ng-options="alternative.code as alternative.label for alternative in question.alternatives">
</select>
if question.alternatives is an array and the following:
<select ng-model="question.answer"
ng-options="alternative.code as alternative.label for (key, alternative) in question.alternatives">
</select>
if it is an object. Both expressions start with the syntax value as label, which tells the <select> what to consider a value (to be bound to model) and what to use as a label (visible for users). The whole business with "this option has that value and is selected when model has it too" is then done automatically. See documentation.
<select ng-model="question.answer" ng-options="alt.code for alt in question.alternatives"></select>
modelValue as optionLabelValue for item in array if 'modelValue as' is ommited modelValue is considered as item object
I have a problem and I don't see how to deal with it simply.
I have a select with option (with ng-repeat in it, I don't use ng-options to do that because I need to have ng-class on option).
<input ng-model="query" type="text">
<select class="span12 long-list" multiple="multiple">
<option ng-class="whatever" value="{{ element[idAttribute] }}"
ng-repeat="element in elements | filter:query">
{{ element[valueAttribute] | translate }}
</option>
</select>
This code is part of a template directive so valueAttribute and idAttribute are dynamique.
With this code, the filter is applied on my elements objects.
The problem is that the filter only applies on untranslated content of the object and I want it to be applied on the object AND the translated value.
Is there a simple way to do it in using only the view ?
I see two solutions to do it but I have to manipulate other part of the code :
- Use a custom filter wich translate the value before filtering it
- Add in each element object a translated attribute
thank you