I have created a dropdown using angularjs directive. Following is the template I have used
<select ng-model="selected" ui-select2="{allowClear: true, placeholder: placeholder}">' +
'<option value=""></option>' +
'<optgroup ng-repeat="group in Groups" label="{{group.name}}">' +
'<option ng-repeat="value in values" value="{{value.code}}" >{{value.name}}</option>' +
'</optgroup>' +
'</select>
Now, I have a table which has same dropdown values in one of the columns. When a table row is clicked I need to get the value and select the respective value in the dropdown automatically. I was able to fetch values from the row but not sure how to select the clicked option in the dropdown.
I have searched around for suggestions but got nothing so far. Please suggest. I have started learning angularjs last week only so pardon me if I am missing something obvious here.
The general solution what you are trying to accomplish is to simply change the model of the select element and select boxes' value will update automatically.
Assuming that your table row is set up like so:
<table><tbody>
<tr ng-repeat="number in [1,2,3,4]">
<td><button ng-click="selected = number">{{number}}</button></td>
</tr>
</tbody></table>
<select ng-model="selected">
<option ng-repeat="value in [1,2,3,4]" value="{{value}}">{{value}}</option>
</select>
clicking on the button in the table will set the value of the select dropdown accordingly
Related
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
I am using AngularJS (1.5) and im trying to create a select dropdown that can display a different text when selected vs shown in dropdown options
Option example {id: 1, name: 'text', selected: 'this was selected'}
Given the example above, how can i show the name property when they open the dropdown but the selected property after the option is selected?
You have a couple options for dropdowns in angularjs. If you're going the ng-repeat route, then if you have an array of objects structured like your example, then this would work:
<select ng-model="selectedItem">
<option ng-repeat="item in items" value="item.selected"> {{item.name}} </option>
</select>
This will display the "name" in the dropdown, but since value=item.selected, it will assign the "selected" value to your ng-model.
Alternatively, you can do ng-options for the select and something like this would work:
<select ng-model="selectedItem"
ng-options="item.selected as item.name for item in items">
</select>
This does the same thing, but ng-options tends to allow more flexibility as you can assign entire objects to your model rather than just strings like ng-repeat only allows, plus angular claims it's faster.
Hope this helps. See here for more info https://docs.angularjs.org/api/ng/directive/select
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.
Im trying to create an ng-table which needs following
each cell should be editable on single click.
Each cell will have a template ( like few cells are text fields and few cells have options dropdown in it ).
3.This grid should always have one empty/new row for user to enter values , as user clicks on empty/new row ( which is always shown by default ) a new row should get added.
More precise, do I have to add a template like this ?
<td data-title="'Agency #'"><input type="text" ng-model="dealer.AgencyKey" /></td>
also for options do I have to add like this
<td data-title="'Account Type 2'"> <select class="form-control" ng-model="contractsHeader.AccountTypePT" required autofocus id="accountType2Options">
<option ng-repeat="accountType2 in accountTypes2" value="{{accountType2.KeyValue}}">{{accountType2.Description}}</option> </select> </td>
NOTE : I have basic knowledge on ng-table ( creating read only table by binding data from service )
Appreciate your thoughts and inputs
You need to move your ng-repeat from the option to the select
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.