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
Related
I have a form which is being generated by AngularJs via a JSON object that returns an array of select names and values. The code is below and working well:
<div ng-cloak ng-repeat="site in form.json" class="form-group">
<label class="control-label col-md-3">{{site.ItemName}}</label>
<div class="col-md-6">
<select class="form-control select2">
<option value="show-all">All</option>
<option ng-repeat="item in site['SelectList' + ($index + 1)]" value="{{item.SelectValue}}">{{item.SelectText}}</option>
</select>
</div>
</div>
So it's currently generating two select drop downs from 1 JSON object being generated in the backend via PHP. I now need it to also generate some check boxes on the form so am adding these into the array generated by the PHP. The JSON for these will remain in the same format as for the current selects (select name, select value). The additonal data will be appended to the end of the current JSON object so I just need to make the div with class="col-md-6"> conditional. I have a value being returned into the expression {{site.ItemName}} which will be perfect for filtering this but I can't see how I can use this with ng-show to make this work. Ideally I need something like this on the current div:
<div ng-show="{{site.ItemName}} !== 'checkboxes'" class="col-md-6">
<select class="form-control select2">
<option value="show-all">All</option>
<option ng-repeat="item in site['SelectList' + ($index + 1)]" value="{{item.SelectValue}}">{{item.SelectText}}</option>
</select>
</div>
And then the opposite on the new code for the checkboxes. I've tried the above but it isn't working. Thinking about it I will probably need another conditional on the actual ng-repeat so it doesn't action on the select drop-down HTML when we are looping through for the checkboxes.
Does this make sense? Or is it a crazy approach? Should I just create a separate app.controller and call to the api for the checkboxes? I'm trying to get all form HTML back in a single JSON object to avoid multiple calls.
Thanks,
Noon.
ng-show expects an expression , not interpolation
Try
ng-show="site.ItemName != 'checkboxes'"
Variables used will be evaluated within angular scope context
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
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)
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 using the following code for ng-init :
<select ng-model="yourSelect3"
class="form-control"
ng-init="yourSelect3=requirements.Item2[0]"
ng-options="yourSelect3.StateName for yourSelect3 in requirements.Item2">
</select>
But the initial value is not displayed. Why?
Your issue is that ng-init does not do what you think it does. It is primarily used in certain cases with ng-select. Angular doc : https://docs.angularjs.org/api/ng/directive/ngInit
What you need to do is simply initialize your model in your controller :
$scope.yourSelect3 = $scope.requirements.item2[0];
Your ng-options is syntactically correct. However, I would recommend that you change your ng-options so that the iterator does not share the name with your model ; this could lead to all sorts of confusion
<select ng-model="yourSelect3"
class="form-control"
ng-options="item.StateName for item in requirements.Item2">
</select>
REWRITE: my previous answer was a little unclear and it missed out a second error.
1st problem: 'yourSelect3' in the ng-options is a 'temp' variable to be used only in the context of the ng-options. You can't use this as the ng-model.
2nd problem: in the ng-options you are saying to use the 'StateName' property as the choosen value however your ng-init is trying to assign the whole object as the choosen value.
So...
if you want StateName as the choosenValue use..
<select ng-model="choosenValue"
class="form-control"
ng-init="choosenValue=requirements.Item2[0].StateName"
ng-options="yourSelect3.StateName for yourSelect3 in requirements.Item2">
</select>
<!-- for debugging --> {{ choosenValue }} <!-- should show a statename -->
else if you want the object as the choosenValue but display the statename as the options title use..
<select ng-model="choosenValue"
class="form-control"
ng-init="choosenValue=requirements.Item2[0]"
ng-options="yourSelect3 as yourSelect3.StateName for yourSelect3 in requirements.Item2">
</select>
<!-- for debugging --> {{ choosenValue | json }} <!-- should show the object -->
<!-- for debugging --> {{ choosenValue.StateName }} <!-- should show a statename -->