I have searched a lot for the issue which i am facing. I have just started learning Angular and stuck in this problem since 3 days and wasting my time to solve this.
i have roles listing array. i have added selected = true key value pair if that element is selected in the form.
[{"role_id":1,"name":"MANAGER","selected":true},"role_id":2,"name":"USER","selected":true},{"role_id":3,"name":"Developer"}]
i have added selected roles in $scope.selectedRoles variable from controller and used in ng-model this way i can get selected role in edit form
<select ng-model="selectedRoles" multiple ng-options="item.name for item in roles track by item.role_id" class="form-control" > </select>
but when i save edit or add then i dont get any value in controller nor ng-model bind the input which i give in select
if i change ng-model to selectedRoles to permission.roles then i could save or edit.
i want to do both task which is not happening.
i appreciate in advance if any help.
Related
So I have a select box which populates some values into the dropdown using ng-options So I want to show the error messages as soon as the user click on the dropdown and focus out without making a selection.
JS Code
$scope.someMap = [{ 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 someMap 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>
So it is working in a case where I add a blank option like option value="" selected hidden/> </select> and select some valid value and then select the blank option again, it gives error message as Required field.
But as you can see, the above selectbox will be blank once the page loads, so if use click on the dropdown and focus out without selecting or move to other field without selecting any value it should give error as Required field.
now if I try to iterate through the value of form.inpName.$error is never having any value and i cannot validate it using the above technique.
I have tried ng-show , ng-if , message expression may be am lacking some expertise.All of them works after selecting valid entry from dropdown and then moving back to blank option.
Solutions which would not work for me
Check model value:I do not want to go to model for these types of field and check if they are blank then show some error message, rather I want to iterate through the $error array and find the issue with the field
Make the default option selected when page loads- Cannot do it.
Add a field as selected one options : This will also not work because if the user did not touch the selection at all and filled all other fields the $error will not be populated for this select dropdown.
Any help would be much appreciated, really struck on this one.
As helped by #Ininiv in above post the code i posted works fine in plunker but not in my dev environment.
So based on some POJO/Entity out objects gets formatted with properties as null.So when i select and the option populates angular does not see as a change in the model, unless i select a value from dropdown and select a blank option from dropdown again. It gets activated.
But I wanted it to start working from the first touch itself, if left blank the error message should pop up.
To tackle this the ngModel needed to be set to null, when the dropdown the $error thing is activated and If i leave it blank and move to other field the error shows up.
So basically on the change of model only the ngMessages directive get activated which was not happening for dropdowns which were populating based on some object properties.
Sorry for asking this question again. but I'm new to angularjs. my que is...
I have five drop downs which are loading from json using angular js(ng-option). now I need that if user selecting value in one drop down that same value should not appear in another four dropdowns.
I really want solution. I search a lot and practice more and more but. Couldn't find any solution. Plz plz plz help me.
I'm not sure if I've got your problem right, but I would try to create an array, let's say $scope.selectedOptions. And then on select push the value to this array. After that you can filter the options in other dropdowns with lodash for example.
here is the solution that you can apply in easy way.
one model you sending to other select.
<select ng-model="countryList"
data-ng-options="countryList for countryList in countryListArray" ng-change="getStates(countryList)" >
<option value="" disabled selected>-- Choose Country--</option>
<select ng-disabled="!countryList" ng-model="stateList"
data-ng-options="stateList for stateList in stateListArray" ng-change="getCities(stateList)" >
<option value="" disabled selected>-- Choose State --</option>
</select>
you need to add below code in your dropdown elements so as to avoid recursive calls to all three of your dropdowns during change in ng-model values.
ng-model-options="{ updateOn: 'change', debounce: { change: 0 } }"
Also there is a function which updates data object of your $scope.records array. Please take a look at this fiddle. I think this is what the specific thing is which you wanted.
I have a select list which is rendered via an ng-repeater and on change it fires the value of the selected option into a function this works as expected.
The issue I am now stuck on is if the page is loaded with a specific option requested how I ensure that select option is highlighted.
I have it so the GUID which is the value of the select is automatically fired to the function to get the page data for the selected item so that's working the issue is highlighting the selected item in the select list to show the user its related to that selection.
My code is below but you will see that I am binding it to ng-model="asCtrl.accSelected" which passed the GUID value. My assumption was that when a predefined GUID is requested I can set vm.accSelected to be equal to the GUID value and that should due to the 2 way binding show the selection on the select list but this doesn't seem to be the case.
<div data-ng-controller="tpAccStatusCtrl as asCtrl">
<select class="form-control" ng-model="asCtrl.accSelected" ng-change="asCtrl.retrieveAccount(asCtrl.accSelected)">
<option value="select" selected="selected">Select an Account</option>
<option ng-repeat="acc in asCtrl.accounts" value="{{acc.UniqueIdentifier}}">{{acc.AccountName}}</option>
</select>
</div>
I hope the above makes sense and someone can show me how to ensure the select list reflects the value set for vm.accSelected
Call the asCtrl.retrieveAccount(asCtrl.accSelected) function manually on page load. Ng-change will only trigger if the value is changed by the input, if I'm not mistaken.
I have a search form where you can search for a hotel. It also asks for the number of Adults as a select box (I want it to default to 2).
To maintain state I have the search results saving as sessionStorage. I then want to pick this up and have the selected value of the number of adults that was set in the session.
Can anyone help? Can't find this anywhere.
If understand correctly for your select you will need to do something like this:
<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
In your angular controller you can set $scope.selected to value 2 so that will be the default. You can read more here
Please let me know if you have anymore questions.
I have the code listed below which works fine, however when i attempt to add ng-model and related ng-change to the select, an empty option is added. I understanding why, it is because on init the selectedOption for ng-model is empty.
What I want to do is set a default value so when I can use ng-change to set options IsSelected value to true when user selects it. I'm just not sure how to go about this, I have no issues doing this when I'm working with a static generated select list, but for some reason I can't figure it out for this dynamic generated list.
Any input is appreciated!
<div ng-repeat="optionType in productDetailModel.OptionTypes">
<select name="{{optionType.OptionTypeName}}">
<option ng-repeat="option in optionType.Options"
value="{{option.OptionValue}}">{{option.OptionValue}}
</option>
</select>
</div>
Here's plunkr I mocked to give a basic idea of what I have in mind: http://plnkr.co/edit/xBDfc0XzDwsF0mBiFZOv?p=preview
The initial option is blank because the model is initially undefined.
As tymeJV said, initializing your scope inside of your .js will define a default value that will be shown as selected initially.
$scope.modelName = $scope.optionType.Options[0];
It might be helpful to use ng-options instead of ng-repeat. One reason why it might be beneficial is that ng-options does not create a child scope (unlike ng-repeat). This could help simplify linking to your model and avoid confusion.
<select name="{{optionType.OptionTypeName}}" ng-model="modelName" ng-options="option for option in optionType.Options">
</select>
This article covers the basics of ng-options as well as discusses why it would be used as opposed to ng-repeat.
Hope this helps.
Use ng-options when using a select!
<select name="{{optionType.OptionTypeName}}" ng-model="someModel" ng-options="option as option for option in optionType.Options>
</select>
And then set the ngModel to the default option you want selected:
$scope.someModel = $scope.optionType.Options[0]
There is one directive of select element is ng-init but it call once while first time rendering, but if you change the options dynamically then it will not call again. So for that you need to set the model field with value in scope just below of your new option population logic.
$scope.modelName = $scope.Options[0]; // if array
$scope.modelName = $scope.Options[key]; // if Json Object