I have a list of filtered data:
<tr ng-repeat="course in courses | filter:search:true">
<td>
<div>{{course.course_name}}</div>
</td>
</tr>
and a SELECT input to help filter it:
<select ng-model="search.location_id">
<option value="">Location</option>
<option ng-repeat="course in courses" value="{{course.location_id}}>{{course.location}}</option>
</select>
Everything works great when switching between course locations to filter the data. My problem is that when I want to show ALL of the data and return to the default SELECT option (value=""), the data is gone and interprets it as nothing matching instead of unsetting the filter.
I realize that if I use search:false, it will work as intended, but I need this parameter as true and I also need a way to reset the filter.
You should use ng-options inside your select statement. You can leave the single <option> with value="" in there though. If you select the default option, the value of search.location_id will be null, which should be exactly what you need.
<select ng-model="search.location_id" ng-options="course.location for course in courses">
<option value="">Location</option>
</select>
Demo on Plunker.
Related
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 have data coming from third party system, that makes up a AngularJS select.
The data may build one or more select.
I can count the number of select (y) it can build select dynamically but select does behaves in weird way when I select options
<td ng-repeat="y in numCols track by $index" ng-init="myText='ChoiceCAP'+$index;myText2='ChoiceFO'+$index">
<select ng-model="mydata[myText]" >
<option selected value="mydata[myText]" > {{mydata[myText]}} </option> <option value="mydata[myText2]" > {{mydata[myText2]}}</option>
</select>
</td>
Here is the data I receive: it can be one or more of the ChoiceCAP and ChoiceFO and do not have preset number of values.
{"ChoiceCAP0":"Jonny","ChoiceFO0":"Mini","ChoiceCAP1":"Mini","ChoiceFO1":"Jonny","ChoiceCAP2":"Jonny","ChoiceFO2":"Mini"}
The problem was with the model , Took care of it with a different scope variable that fixed the issue
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 ng-repeat on option in select.
<select ng-model="mymodel">
<option ng-repeat="p in persons" value="{{p.id}}">{{p.name}}</option>
</select>
$scope.persons= [
{id:1,name:"tester11"},
{id:2,name:'tester22'},
{id:3,name:'tester33'},
{id:4,name:'tester44'}
];
How can I make an option selectable means by default "tester33" should be selected
through use of ng-model.
I know it is achievable through ng-options. But I want to try this one.
Thanks in advance.
There is no perfect way to achieve this using ng-repeat, but here's a workaround:
<select ng-model="mymodel">
<option ng-repeat="p in persons" ng-selected="p.name=='tester33'" value="{{p.id}}">{{p.name}}</option>
</select>
This just sets the option with name='tester33' but the model won't get updated until the user changes select value explicitly
NOTE: This is not a recommended way, you must use ng-options for complete functionality
I've been trying to figure out how to set this particularly select like this:
<select name="ddlStatus" id="ddlStatus" class="form-control" ng-model="status" ng- change="onChangeStatus()">
<option ng-repeat="status in orderStatus" value="{{ status.ID }}">{{ status.Name }} </option>
</select>
How can i set is without ng-repeat and insted using ng-options? Ive tried a lot of solution but nothing solves it like this way i show above..
You can use as in ng-options:
<select ng-model="status" ng-options="status.ID as status.Name for status in orderStatus"></select>
Alternatively, angular seems smart enough to use the whole status object as the value even when you specify some sub-field like name as its label.
<select ng-model="status" ng-options="status.Name for status in orderStatus"></select>
Demo: http://jsfiddle.net/4ApFG/1/
You can use the whole model as the value like:
<select ng-options="status.Name for status in orderStatus" ng-model="status">
</select>
That way you can just get the selected id over status.ID. Angular will handle the value model linking stuff for you.
Or of course the id is also possible. Although at least for me it seems to be a bit confusing because you will have the array index in the generated html and the id as the actual value.
<select ng-options="status.ID as status.Name for status in orderStatus" ng-model="status">
</select>
Additionally asigning the whole model to status makes a lot more sense than just the id.