I have different <select> in a ng-repeat div.
What I want is to avoid users select several times a same option.
I used the filter like this :
<div ng-repeat="customer in datas.customers">
<select ng-model="customer.attributeId" ng-change="updateCustomer(customer)">
<option ng-repeat="attribute in datas.attributes | filter:filterByAttributeNotUsed(customer)" value="{{attribute.id}}">{{attribute.name}}</option>
</select>
</div>
The filter works like I want (I tested it separately). But the result is not good.
When the filter is active, options in different select have to show only "free" attributes (it means, attributes which are not yet selected).
Here is a Demo which is more explicit I suppose.
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>
Having a lot of trouble with ng-repeat in a select tag. The below is not working for some reason though all documentation indicates that it should.
<select id="blahh" ng-model="log_instances" class="selectpicker" multiple>
<option>this works</option> <!-- this works -->
<option ng-repeat="comp in env.status.components">test-value</option>
</select>
The only option that ends up showing is the 'this works' one, but I would expect 'test-value' to show up for each of the items described in the ng-repeat's.
Additionally, I also checked the console for angular.element(document.getElementById('blahh')).scope() and it shows the proper data that I would expect to see. Also, if I include a table right below this select with the same ng-repeat's and fields, it produces the expected output just fine. I'm using Angular 1.6.5
Any help is appreciated!
The HTML snippet included with the original question had <span> tags as immediate children of the <select> tag, which would've produced invalid markup as only <option> or <optgroup> elements are permitted.
Whenever you have a data collection that needs to be presented as a select list, Angular's ng-options attribute makes it easy.
DEMO
Also, if you need a default option (for when the collection data might be in transit due to an AJAX request), include an <option> element assigned with an empty value (i.e. value=""), then you could use ng-if to hide this default option when it is no longer necessary.
Use ng-options like below. But your code also should work check env.status.components
<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
My question to you would be, why do you want to use a ng-repeat inside a multiple select, when you have ng-options handy?
Assuming your comp object looks like this:
{
name: 'somevalue'
}
I would change your code to look like so:
<select id="blahh" multiple="true" ng-model="log_instances" ng-options="comp.name for comp in env.status.components"></select>
Please have a look at the plunker demo I have made for you
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
Im creating angularJS app with a list of items. I've implemented filtering of the list successfully, but I can't find out the way how to apply it by default. What I mean is that I want to display filtered list by default and users to be able to see the full list if they want.
I've tried selecting option by default but this doesn't trigger filtering at all despite it is selected.
my filter looks like this:
<select ng-model="query.status" ng-click="setItems()" class="form-control">
<option value="">All tasks</option>
<option value="0" ng-selected="true" selected="selected">Todo</option>
<option value="1">Done</option>
</select>
setItems() Function is used for pagination only so it doesn't have any affect on filtering itself
is query.status responsible of filtering your list ?
In that case init it to the value you want the list to be filtered by.