I have a ng-model called field.value which is also from ng-repeat. when I check the field.value by putting inside the <span> element. I can check the value is 17 from which I expected the drop down goes to the id of 17 but it's doing nothing. How can I make the dropdown choose a value depending on id bound with model.
<div ng-if="field.name=='OrderTypeId'" class="input-group inputFill">
<select class="form-control inputFill2" ng-model="field.value"
ng-options="oderType.id as oderType.name for oderType in dropdown.availableOrderTypes | orderBy:'name' track by oderType.id">
</select>
<span>{{field.value}}<span>
</div>
From the Docs:
select as and track by
Be careful when using select as and track by in the same expression.
For more information, see
AngularJS ng-options Directve API Reference - select as and track by
Related
I am having select dropdown which filters data corresponding to selected option. If nothing is selected then it shows 3000+ records which is freezing my UI for few seconds. But for other option switching which has few hundreds data is perfect and fast. Is there any way to improve performance here?
Following is the dropdown filter and citylist is an array which gets datas from server.
Select City:<span class="float-right fa fa-window-close mb-2"
ng-click="sm.selectedCity=undefined;">
</span>
<select ng-model="sm.selectedCity" >
<option value="" selected hidden />
<option ng-repeat="s in sm.citylist"
ng-selected="sm.selectedCity" ng-value="">
{{s.value}}
</option>
</select>
Following UI data varies based on selected city option above. Initially none of the option is selected which fetches more than 3000 datas for one of the grouped Country object.
To briefly explain below UI...sampledata is a complex object filled from server. sampledata contains Country property which is grouped and it can be collapsed or expanded by clicking plus/minus at its right side. Based on selected city filter Grouped Country will change. Its working fine for less data. But if one of the Country has more datas like (3000+) my UI freezes while clearing the filter
<div ng-repeat="(key, value) in sm.sampledata | filter:{STFilter:sm.selectedCity} | filter:{someother } | filter:search.number | orderBy:'Country' | groupBy: 'Country' track by $index">
<div class="mb-5">
{{ key }} ({{ value.length }})<span ng-class="sm.toggle[$index] === true ? 'fa fa-minus' : 'fa fa-plus'" ng-click="sm.toggle[$index] = !sm.toggle[$index]" class="pull-right"></span>
</div>
<div ng-show="sm.toggle[$index]">
<div ng-repeat="o in value">
//o is a complex object in which one of the object needs to be filtered based on selected option from dropdown
<div>
{{o.sample1}}<span class="pull-right">{{o.sample2}}</span>
</div>
//Still more will come
</div>
</div>
<hr />
</div>
Note: I am using angular 1.7.2 version
To increase performance, use the ng-options directive.
From the Docs:
Choosing between ngRepeat and ngOptions
In many cases, ngRepeat can be used on <option> elements instead of ngOptions to achieve a similar result. However, ngOptions provides some benefits:
more flexibility in how the <select>'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.
For more information, see
AngularJS <select> Directive API Reference - Choosing between ngRepeat and ngOptions
AngularJS ng-options Directive API Reference
Select City:<span class="float-right fa fa-window-close mb-2"
ng-click="sm.selectedCity=null">
</span>
<select ng-model="sm.selectedCity"
ng-options="s.value as s.value for s in sm.selectedCity">
</select>
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 have nested data objects that I want to show to a user based on the filters they have selected. I am a bit new to angular but finding how to solve this problem has taken me a while now and not really got anything good.
<tr ng-repeat="stockItem in stock | filter : stockFilter ">
<td>{{stockItem.dateCreated | date:'dd/MM/yyyy (HH:mm)'}}</td>
<td>{{stockItem.sku}}</td>
<td>
<select class="form-control">
<option ng-repeat="supplierOrderStock in stockItem.supplierStock | filter : supplierSelectionFilter"
value="{{supplierOrderStock.supplierId}}" >
£{{supplierOrderStock.price}}
</option>
</select>
</td>
</tr>
I have check boxes on the top of the page and when you check or uncheck them the drop downs get updated with the filtered data.
Problem is that the SELECTED drop down is random, usually the first one that was selected on initial render.
I just want the cheapest value to be shown in the drop downs and the way the data is sorted that is always going to be the first select option.
How do I set the drop down selected value, for each nested repeat to be either the cheapest one or just simply the always the first drop down??
You can try to use the NgOption directive instead:
<div class="col col-50">
<span>Orientation</span> <br>
<select name="orientation" id="orientation" ng-options="option.label for option in data.filters.basics.orientations track by option.id" ng-model="data.selectedOrientation">
</select>
</div>
In my case the data.selectedOrientation is the default ng-model that i had to setup in the controller:
$scope.data.selectedOrientation = $scope.data.filters.basics.orientations[($scope.data.selections.basics.orientations[0]-1)]
If you dont want to change your dom element jsut add a ng-model to it
<tr ng-repeat="stockItem in stock | filter : stockFilter ">
<td>{{stockItem.dateCreated | date:'dd/MM/yyyy (HH:mm)'}}</td>
<td>{{stockItem.sku}}</td>
<td>
<select class="form-control">
<option ng-repeat="supplierOrderStock in stockItem.supplierStock | filter : supplierSelectionFilter" ng-modal="yourModelForThisDom"
value="{{supplierOrderStock.supplierId}}" >
£{{supplierOrderStock.price}}
</option>
</select>
</td>
</tr>
After learning a bit more I finally realised that it will be much easier if all the data is stored and filtered on the Model and collections within.
<select class="form-control" ng-show="stockItem.supplierStockFiltered.length > 0"
ng-model="stockItem.selectedSupplier"
ng-options="option as getSupplierDropDownText(option) for option in stockItem.supplierStockFiltered track by option.price"></select>
<span ng-show="stockItem.supplierStockFiltered.length == 0 || stockPackItem.supplierStockFiltered == null ">
No Stock
</span>
So when the data loads or when ever I click on any check boxes, I just use angular.forEach( in the controller to set the Selected Item based on what ever I filtered out. The actual two fields I am binding too are not contained int he the data that comes back from the server. But in JS you can just dynamically add those fields before the HTML binds and it works great!
The HTML is much cleaner and I have much better control over the models.
End of the day I had to go do this any way because now I need to save all the selected drop down values... and now because the Selected item is bound to the model.. its easy peasy. I just serialise the models and use the data on the server.
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 have this select in AngularJS:
<select id="objectId" name="seccionId" class="form-control" ng-model="arguments.seccion" data-ng-options="item.id as item.valor for item in arguments.objects" required></select>
I like to save both values in scope, but I only save one value.
Any form to save both values?
Thanks!!!
If you want the entire value to be bound to ng-model than you can simply omit the select portion of your ng-options expression.
In this case, it's the item.id part.
data-ng-options="item.valor for item in arguments.objects"
This will ensure the entire item is bound to your ng-model when selecting.
I am assuming you want a multiple select. Have you tried using the attribute multiple:
<select id="objectId" name="seccionId" class="form-control" ng-model="arguments.seccion" multiple="true" data-ng-options="item.id as item.valor for item in arguments.objects" required></select>