In Angular, I want what displays in the select to be a combination of two properties from the object in the array. For example, I have auctionName and auctionLocation on the item and I want the text in the display to appear like auctionLocation-auctionName.
<select ng-model="selectedAuction" ng-options="item.auctionLocation as item.auctionLocation for item in auctions">
<option value="" disabled selected>All Auctions</option>
</select>
values can be concatenated inside ng-options.
For your case you can use:
ng-options="item.auctionLocation as item.auctionName+'-'+item.auctionLocation for item in auctions"
Demo: http://plnkr.co/edit/uqoe0Hx4f0mOlU1f1wRE?p=preview
Related
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 a different case here with ng-options
I have two modes for my app. New mode and Edit mode
I have SELECT input types for DISTRICTS and VILLAGES. The VILLAGES select is populated based on DISTRICT selection using ng-change event of DISTRICT select. This works fine in NEW mode.
But when in EDIT mode, the DISTRICT is correctly showing the value of ng-model. But the VILLAGE select input item is not showing the ng-model value. This is because, the village select does not have any items populated in it as the ng-change event of DISTRICT never triggers in EDIT mode.
I still want to show the ng-model value of VILLAGE as selected item in the drop down, even if it does not have any options in it. (in EDIT mode)
Any ideas of how this can be done? Please shed some light
Here the code below for DISTRICT select
<select class="form-control" name="district" id="field_district" ng-model="vm.apeksha.district" required
ng-change="vm.updateblocks(vm.apeksha.district)"
ng-options="x.malDistName as x.malDistName for x in vm.masterDistricts " >
Here is the code for VILLAGE select input item
<select class="form-control" name="village" id="field_village" ng-model="vm.apeksha.village"
ng-options="village.M as village.M for village in vm.villagelist track by village.M"
required >
<option value="{{ vm.apeksha.village }}">{{ vm.apeksha.village }}</option>
</select>
The option item is not shown even if there is value on "vm.apeksha.village"
In controller, we have a function which uses a factory to update the list of data corresponding to each DISTRICTS. Here is he code of controller
/**
* Update dropdown boxes of VILLAGES, THALUKS, PO AND BLOCS
* based on district selection
*/
vm.updateblocks = function(districtName) {
vm.blockslist = masterDataPopulator.getBlocksForDistrict(districtName);
vm.postofficelist = masterDataPopulator.getPostOfficesForDistrict(districtName);
vm.villagelist = masterDataPopulator.getVillagesForDistrict(districtName);
vm.thalukList = masterDataPopulator.getTaluksForDistrict(districtName);
};
Any ways to do this?
I suggest you to go for ng-options in this case instead of ng-repeat with <option> tag.
The above is the list of category. Selecting one category will load the dropdown with the subcategories as below,
Category
<select class="home_search_select" name="d1" ng-model="selectedd1" ng-change="homeChanged()" ng-options="cat as cat.category_name for cat in categorydata track by cat.category_id" id="d1">
<option ng-value="">Select Category</option>
</select>
SubCategory
<select class="home_search_select" name="d2" id="d2" ng-model="selectedd2" ng-options="subcat.ID as subcat.Name for subcat in selectedd1.Subcategory track by subcat.ID">
<option class="home_search_select" value="">Select Sub Category</option>
</select>
When the first one is selected, bind the value to the ng-model of second dropdown in the ng-change event
$scope.homeChanged=function(){
console.log($scope.selectedd1)
}
$scope.selectedd2 ={
"Name": "Two Wheeler",
"ID": "1"
};
LIVE DEMO
In the form I have a drop down list with multiple choice, as shown below. Elements are loaded from the database.
<label>Items</label>
<select class="form-control m-b"
ng-model="model.livingComplexId"
x-ng-change="updateOne(model.livingComplexId)">
<option></option>
<option ng-repeat="itemOne in itemsForAddrLevelOne"
value="{{itemOne.id}}">{{itemOne.tobName}}</option>
</select>
I make choose.
For example, I choose an item2.
Then save data. Then, I open the form to edit and I want to see an item that I chose, but the list is empty...
How can I set the previously selected value?
I would recommend to use the ngOptions directive to generate the select menu options:
<select ng-model="model.livingComplexId" ng-options="itemOne.id as itemOne.tobName for itemOne in itemsForAddrLevelOne"></select>
Maybe you could additionally change the ng-model value to model and use ng-options="itemOne as ..." (without the .id) and add an track by itemOne.id.
<select ng-model="yourModel" ng-options="itemOne.tobName for itemOne in itemsForAddrLevelOne"></select>
In the js you should set $scope.yourModel = itemsForAddrLevelOne[0];
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.
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>