I want to select the "id" that I have stored and display it in the form, I need to edit the form and I need to start the form, is selected the id that stores when saving with their respective names.
<select class="form-control"
ng-model="vm.operative_order_id"
ng-selected="dataOrder.operative_order_id" <!--The "id" or "operative_order_id" is from a related table -->
ng-options="orderoperatives.id as orderoperatives.nombre for orderoperatives in dataOperatives"></select>
The "dataOrder.operative_order_id" and "orderoperatives.id" have the same value, what I want is to show the name of that value.
if dataOrder.operative_order_id = 2 I need it "selected" in the ng-option
<option value="2" selected>name</option>
<select class="form-control"
ng-model="vm.operative_order_id" >
<option ng-repeat = "item in orderoperatives " value = "{{item .id}}">{{item .nombre}}}</option>
</select>
Can you pls try like this :)
You don't need ng-selected
Just try this
<select class="form-control" ng-model="dataOrder.operative_order_id"
ng-options="orderoperatives.id as orderoperatives.nombre for
orderoperatives in dataOperatives"></select>
or try this
<select class="form-control"
ng-model="vm.operative_order_id"
ng-selected="dataOrder.operative_order_id" ng-options="orderoperatives.id as orderoperatives.nombre for orderoperatives in dataOperatives"></select>
and you should assign thedataOrder.operative_order_id to vm.operative_order_id in controller, something like
$scope.operative_order_id=$scope.dataOrder.operative_order_id;
Related
I'm working on angularjs and I have a field that has two options YES/NO.
When someone will fill this field I need to show the two options but non of them is selected. So it will look like an empty value, but this empty value should not be an option. I tried to add <option value="?"></option> in the following code, but then the empty value is an option.
Any ideas?
<div class="col-md-3" ng-if="obj.options.length > 0">
<select class="form-control" ng-model="patientReportedSymptomsUI[key]" ng-disabled="$root.newVisit">
<option value="?"></option>
<option ng-repeat="option in obj.options">{{option}}</option>
</select>
</div>
I made select field to show a list of products using angularjs. I need to grab the option value when the form submitted. But I found that the option values are wrong. I expected the values like 1,2,3 etc (whatever product ID in the data array), instead this is what I get:
<option label="Product A" value="object:1">Product A</option>
<option label="Product B" value="object:2">Product B</option>
<option label="Product C" value="object:3">Product C</option>
How to put the right value in this case?
Here is my code:
<select ng-options="item.product for item in data" ng-model="product" name="product" class="form-control" ng-change="selectColorByProduct(item.id_product)"></select>
You need to add item as item.product for label and track by in your ng-options for id. Something like:
<select ng-options="item as item.product for item in data track by item.id_product" ng-model="product" name="product" class="form-control" ng-change="selectColorByProduct(item.id_product)"></select>
How to set ng model value to form fields? ng model value not reflecting on my form
I have a $scope.obj, this obj from server when i try to apply in my form like
ng-model="obj.name", its not reflecting in <select> field. How to solve this issue?
<select class="form-control" ng-model="empEdit.qualification"
ng-options="qualification as qualification.qualificationName
for qualification in qualifications"
name="qualification">
<option value="" selected disabled hidden>
Choose your qualification
</option>
</select>
Controller:
$scope.empEdit = {
"name":"SomeName",
"id": 2,
qualification: {"id":1,"qualification_name: "BS"}
};
The ng-model directive compares object references not object contents. Use a primitive property for the ng-model value:
<select class="form-control" ng-model="empEdit.qualById"
ng-options="q.id as q.qualificationName for q in qualifications"
name="selQual1">
<option value="" disabled>
Choose your qualification
</option>
</select>
$scope.empEdit = {"name":"SomeName", "id": 2, qualById: 1};
For more information, see
why does Javascript comparison not work with objects?
AngularJS ng-options Directive API Reference - select as
I have the following select input in my html which is populated using ng-options. I want to show the selected NAME down below in whereas I want to send the selected ID back to the controller. I get the required id from ng-model="user.category". How can I show the selected name? I also show the names in options.
<select ng-model="user.category" ng-options="category.id as category.name for category in categories" class="form-control" class="select" required>
<option value="{{category.name}}">Select a Category</option>
</select>
<p>Available On : {{user.retailerBranchId}}</p>
<select ng-model="user.category" ng-options="category for category in categories" class="form-control" class="select" required>
<option value="{{category.name}}">Select a Category</option>
</select>
<p>Available On : {{user.category.id}}</p>
If you make retailerBranchId a method you can do it with something like lodash' _.find() (or even native find). You have user.category updating according to your selection, which you say has the id in it, which you can use:
function retailerBranchId() {
return _.get(_.find(this.categories, { id: user.category }), 'name', '');
}
This also fails gracefully; if it can't find any name, or any item that matches the id, it'll return an empty string.
Edit: You would call it in a similar fashion like so:
<p>Available on: {{ user.retailerBranchId() }}</p>
Although really, it's better to use it like this:
<p data-ng-bind="'Available on: ' + user.retailerBranchId()"></p>
Can you try like a below method,
Controller to get selected Category Name:
$scope.getSelectedCategoryDetail=function(selectedCat){
angular.forEach($scope.categories, function(cat){
if(selectedCat===cat.id){
$scope.user.name=cat.name;
}
});
};
Template to have ng-change event:
<select ng-model="user.category" ng-options="category.id as category.name for category in categories" class="form-control" class="select" required>
<option value="{{category.name}}" ng-change="getSelectedCategoryDetail(user.category)">Select a Category</option>
</select>
<p>Category Id : {{user.category}}</p>
<p>Category Name : {{user.name}}</p>
How to get the object of selected option in angular js using ng-repeat? Sample fiddle is here where myself populating the dropdown as,
<select ng-model="id" ng-init="id = '-1'" ng-change="select(option)">
<option value="-1">--Select--</option>
<option ng-repeat="option in list" value="{{option.id}}">{{option.name}}</option>
</select>
If someone chose option with id=1, i want to get the object {id:1, name:'A' in $scope variable.
EDIT: Myself tried with ng-options but filtering is not happening as required based on previous dropdown selection. sample fiddle
Use option object in ng-value={{option}} and whenever u select an option your scope.id will have the desired object.
Basically ur ng-model gets populated with selected value.
Just you have to change your option to this
<option ng-repeat="option in list" value="{{'Id : ' + option.id + ' Name : ' + option.name }}">{{option.name}}</option>
Hope this will work for you and you were looking for the same result
You have 2 option to get as Object.
option 1 :
you can use Filter to get Object
<select ng-model="id" ng-init="id = '-1'" ng-change="select((list|filter:{id:id}))">
<option value="-1">--Select--</option>
<option ng-repeat="option in list" value="{{option.id}}">{{option.name}}</option>
</select>
updated fiddler here
option 2 :
set your value as Object (option)
<select ng-model="id" ng-init="id = '-1'" ng-change="select(option)">
<option value="-1">--Select--</option>
<option ng-repeat="option in list" value="{{option}}">{{option.name}}</option>
</select>