I have an issue in dynamically creating select dropdown in angular js, changing one dropdown option make changes on the rest of the dropdowns. My requirement is to use same data option in all dropdown and to get the selected option in each dropdown. How do I over come this problem?
example:
<div ng-repeat ="option in options">
<select class="form-control input-lg" ng-model='newcategory.option'
ng- change="optsChanged()"required ng-options='option.value as option.name for option
in useroptions'>
</select>
<div>
I need to create a dropdown for each row of a table that has the same options, but it should be a different instance or different model to be assigned dynamically.
use the index as the subscript for the ng-model ng-model='newcategory.option[$index]'.. currently you are using the same ng-model for all the select boxes which is causing the issue
<div ng-repeat ="option in options">
<select class="form-control input-lg" ng-model='newcategory.option[$index]'
ng-change="optsChanged()"required ng-options='option.value as option.name for option in useroptions'>
</select>
<div>
Related
This is my page when I click on Edit the dropdown is not selected with value in the dropdown list ... Image
In edit mode i got like this ... Image
Dropdown shown with values... Image
I need like this ... Image
Here is my angular code:
<select class="form-control form-control-sm form-control-Cutom-height" id="dropdown" style="height: 38px;" ng-model="suppliment.PurchaseTypeId">
<option ng-repeat="Supple in PTSupplement" ng-selected="{{ Supple.PurchaseTypeId == suppliment.PurchaseTypeId }}" value="{{Supple.PurchaseTypeId}}" >
{{Supple.PurchaseType}}
</option>
</select>
Please help me :)
It appears as if when you display the dropdown, the your value is not be populated as the selected value properly. When using <select> in AngularJS, you can specify the ng-options attribute and use that to generate all of the <option> fields for you without doing the ng-repeat that you're doing.
From the AngularJS docs regarding the use of ngSelected:
Note: ngSelected does not interact with the select and ngModel directives, it only sets the selected attribute on the element. If you are using ngModel on the select, you should not use ngSelected on the options, as ngModel will set the select value and selected options.
Instead use the following:
<select
class="form-control form-control-sm form-control-Cutom-height"
id="dropdown"
style="height: 38px;"
ng-model="suppliment.PurchaseTypeId"
ng-options="Supple.PurchaseTypeId as Supple.PurchaseType for Supple in PTSupplement">
</select>
I have input text box to filter items from a dropdown Select list.
This works fine.
But there are two problems.
When data gets populated i want 1st item to be visible in dropdown.
As i type in filter box first matching among the list should be displayes in the dropdown control.
How do i achieve this?
<input type="text" id="fromSearchBox" class="form-control w-auto h-25"
ng-model="SearchEmployee" />
<select class="form-control" ng-model="fromManagerInfo">
<option ng-repeat="emp in employees|filter:SearchEmployee">
{{emp.EmployeeInfo}}
</option>
</select>
You can set the selectedItem using ng-model on ng-init
<input type="text" ng-init="SearchEmployee = employees[0]" id="fromSearchBox" class="form-control w-auto h-25" ng-model="SearchEmployee" />
and for filter you are already using the filter
I have seen few answers which were working for ng-repeat, but with ng-options I am facing issue.
Problem : Want to show the error message required if the dropdown is touched and nothing is selected, I am able to do this with input fields.
JS CODE
$scope.personMap = [{ name:"Abc", id:"a"},
{ name:"XYZ", id:"b"},
{ name:"FGH", id:"c"},
{ name:"TY", id:"d"}
}]
HTML
<select name="inpName" ng-model="person.name" ng-options="i as i.name for i in personMap track by i.id" required>
<option value="" selected hidden/> </select>
<div ng-messages="form.inpName.$error" ng-if="form.inpName.$touched">
<div ng-message="required">Required field</div>
</div>
</div>
Referred this ng-repeat solution
As there is no answer yet, I am posting the issue i found out.
So when i use ng-options it starts adding one extra row in the dropdown which can be blank or you can give something like select me.
I added the below code to fix that and in chrome it does not show any blank row.
<option value="" selected hidden/> </select>
But when i try in IE it still have a blank row, So what happens is when I select one value in dropdown and then click back on the blank row the ngMessage works fine.So if i add one more blank option in chrome and then try to select something first and then click on blank the ngMessage work as expected.
Issue is
I was expecting <select> to work like the input fields and was trying to use the$touched` state. But it does not work like that, I was thinking as soon as i click on the dropdown ngMessage should get active if i leave the focus to other field without selecting anything from dropdown. Not sure if I can make it possible through any other way.
Updated HTML
<select name="inpName" ng-model="person.name" ng-options="i as i.name for i in personMap track by i.id" required>
<option value="">Select one </option> </select>
<div ng-messages="form.inpName.$error" ng-if="form.inpName.$touched">
<div ng-message="required">Required field</div>
</div>
</div>
I need a multi select for my form and I m using the bootstrap select picker but my select option data is loaded from API dynamically and I using ng-repeat to show the option in the select tag. But my select doesnt show up any options. May i know what wrong with my code?
If i use the default html5 multiple select it can show all the data rows.
<select class="form-control" ng-model="inputUserPermission" size="10" multiple required>
<option ng-repeat="salesPersonInSoaps in salesPersonInSoap" value="{{salesPersonInSoaps.FirstName}}">{{salesPersonInSoaps.email}}</option>
</select>
Use bootstrap select picker doesnt work.
<select class="form-control selectpicker" ng-model="inputUserPermission" multiple required>
<option ng-repeat="salesPersonInSoaps in salesPersonInSoap" value="{{salesPersonInSoaps.FirstName}}">{{salesPersonInSoaps.email}}</option>
</select>
Removing select-Multiple will fix it I suppose.
<select class="form-control selectpicker" ng-model="inputUserPermission" multiple required>
<option ng-repeat="salesPersonInSoaps in salesPersonInSoap" value="{{salesPersonInSoaps.FirstName}}">{{salesPersonInSoaps.email}}</option>
</select>
I'm trying to do something like this
but instead of having alert boxes just having comma separated values in the input feild.
Ok I'm trying ui-select2 but I'm not very clear about how to use it. I will provide samples of what I have as a working typeahead and what I have done to try to get the select2 to work.
ui-bootstrap typeahead:
<input type="text" ng-model="selectedItem.value" typeahead="item.value for item in items |filter:$viewValue| limitTo:8" typeahead-on-select="updateItem()" placeholder="select Item"/>
ui-select2 (can't load data.)
<select ui-select2 ng-model="selectedItem.value" data-placeholder="Select Item">
<option value=""></option>
<option ng-repeat="item.value for item in items" value:"{{item.value}}>{{item.label}}</option>
</select>