I updating a form to angular. The selects in it are not generated by angular. I am using angular to add some interactivity and submit the form. I am having an issue where angular is adding a blank select to the element. Is there a way of preventing this without having angular generate the select?
<select name="inventory_status" ng-model="formData.inventory_status">
<option ng-selected="true" ng-value="1">Active</option>
<option ng-value="2">Discontinued</option>
<option ng-value="3">Special Order</option>
<option ng-value="4">Pre-Order</option>
</select>
The above code produces this:
<select name="inventory_status" ng-model="formData.inventory_status" ng-init="sortorder='1'" class="ng-pristine ng-valid ng-touched"><option value="? undefined:undefined ?"></option>
<option ng-selected="true" ng-value="1" value="1" selected="selected">Active</option>
<option ng-value="2" value="2">Discontinued</option>
<option ng-value="3" value="3">Special Order</option>
<option ng-value="4" value="4">Pre-Order</option>
</select>
My hope is to not have this produced:
<option value="? undefined:undefined ?"></option>
Additionally I would like to not have to use angular to generate the dropdown although if that is the only option I could. This only happens when I set this field to ng-model. I am setting it to ng-model because I want to use angular to submit the form.
Thanks in advance.
Set $scope.formData.inventory_status = 1 or whatever value you want selected and it will not show the empty option, plus you don't need ng-selected if you set the value.
Related
For some reason my ng-model is not valid against select options compiled by AngularJS. This is common problem but I did not find a solution that works here.
The select is inside tr element repeated by ng-repeat.
This is my select, ng-model in most cases equals to 1, but an extra question mark option is selected instead:
<select class="form-control ng-pristine ng-valid ng-not-empty ng-touched"
ng-model="item.parent_id" ng-change="validateRow(item)"
ng-options="option as option.name for option in options_parent_names track by option.id">
<option value="?" selected="selected"></option>
<option label="Moja Firma" value="1">Moja Firma</option>
<option label="Dział Finansowy" value="74">Dział Finansowy</option>
<option label="Biuro obsługi klienta" value="76">Biuro obsługi klienta</option>
<option label="Magazyn" value="77">Magazyn</option>
<option label="Dział zamówień" value="78">Dział zamówień</option>
<option label="Dział X" value="80">Dział X</option>
<option label="Inny dział" value="91">Inny dział</option>
<option label="Dział Y" value="92">Dział Y</option>
<option label="Dział Z" value="93">Dział Z</option>
</select>
I am using track by which helps by removing number: part from option value attribute
Tried convert-to-number directive but that does not change anything.
Tried ng-repeat instead of ng-options
Tried generating options by PHP but that does nothing more than spamming HTML
Tried using ng-value in options
Tried ng-model with | number filter
Tried casting value to number before it goes into ng-model
What eventually worked out was generating options in HTML with no ng-options.
I am trying to toggle ng-selected options in Angular, but am running into some difficulty. Here's what I'm trying:
<select ng-model="datacut.ages" multiple>
<option value="" disabled="disabled">Please Select</option>
<option value="0-15" ng-click="toggleSelect(datacut, '0-15')" ng-selected="datacut.ages.indexOf('0-15') !== -1">15 and Younger</option>
<option value="16-19" ng-selected="datacut.ages.indexOf('16-19') !== -1">16 - 19</option>
<option value="20-24" ng-selected="datacut.ages.indexOf('20-24') !== -1">20 - 24</option>
</select>
Controller:
$scope.toggleSelect = function(dc, str){
dc.ages.splice(dc.ages.indexOf(str), 1);
//e.currentTarget.selected = !e.currentTarget.selected;
};
The problem is that when I click on an option gets selected on mousedown, and on release gets unselected. The commented out code also does the same thing.
I feel like this should have a simple solution, but I can't really figure out an elegant solution.
Any help would be much appreciated.
Edit: For clarification - I need to be able to have nothing selected, so clicking a single selected element needs to unselect it. I also need to be able to select multiple options.
Your are using ng-model which does the magic for you. So ng-click and ng-selected is not necessary. See my working fiddle
<select ng-model="datacut.ages" multiple>
<option value="" disabled="disabled">Please Select</option>
<option ng-value="'0-15'">15 and Younger</option>
<option ng-value="'16-19'" >16 - 19</option>
<option ng-value="'20-24'" >20 - 24</option>
</select>
It looks like you want to remove the selected age from the ages model. Then you need to use the ng-change directive. And remove the ng-click or ng-selected. But leave the ng-model to access the value on the method that remove the selected item.
See my plunker
<select multiple name="ages" unseletable forbiden-opt="datacut.MIN_AGE" ng-model="datacut.chosenAge">
<option value="" disabled="disabled">Please Select</option>
<option ng-repeat="age in datacut.ages" value="{{age}}">
{{age}}
</option>
</select>
EDIT: This should be made in a directive because you need to update the option html to unselect the option.
I am using bootstrap select Bootstrap-select v1.7.2 in Angular. When I select some option from drop down it selects some other option.
Plunker is setup here:
http://plnkr.co/edit/MRYOkW?p=preview
(code is in dashboard.html and dashboard.js)
That's how I am creating it. bootstrap-dropdown is the directive that initiates the drop-down.
<select ng-model="vm.CurrCustomer.Logic" name="ddlLogic" bootstrap-dropdown >
<option>Contains</option>
<option>Greater Than</option>
<option>Less Than</option>
<option>Equal To</option>
</select>
You missed to add value attribute on your options that would set value of ng-model on select of any option
<select ng-model="vm.CurrCustomer.Logic" name="ddlLogic" bootstrap-dropdown>
<option value="">Contains</option>
<option value="Greater">Greater Than</option>
<option value="Less">Less Than</option>
<option value="Equal">Equal To</option>
</select>
Update
If you want to render select option dynamically I'd refer you to use ng-options which support select perfectly. You can select object on selection of option
Demo here
problem is you can't add option value property . either set value property or generate this using ng-repeat option
Above answer must be the right answer but, It seems like you had an unwanted empty option an it was messing the index. By adding a real one it started to work.
<select ng-model="vm.CurrCustomer.Logic" name="ddlLogic" bootstrap-dropdown >
<option></option>
<option>Contains</option>
<option>Greater Than</option>
<option>Less Than</option>
<option>Equal To</option>
</select>
I've got a select element, like this:
<select id="fieldName"
class="form-control"
ng-model="condition.type">
<option value="{{constants.TYPE_SORT_BY_SENDER}}">
{{locale('Sender')}}
</option>
<option value="{{constants.TYPE_SORT_BY_RECIPIENT}}">
{{locale('Receiver')}}
</option>
<option value="{{constants.TYPE_SORT_BY_DATE}}">
{{locale('Date')}}
</option>
<option value="{{constants.TYPE_SORT_BY_ATTACHMENT}}">
{{locale('Has attachment')}}
</option>
<option value="{{constants.TYPE_SORT_BY_SUBJECT}}">
{{locale('Subject')}}
</option>
</select>
constants object is defined in $rootScope on $stateChangeStart event, so when I look on this element using firebug it looks ok.
But the problem is that this select is not selecting the correct option on page load: if I change a constant to the number it works fine.
I don't want to have any magic numbers in my template, but I can't get this select to work.
What should I do here?
I have a listbox that I am creating with a select, using AngularJS ng-repeat. The listbox is created correctly, and when I select one of the items and click my button, I get to the function and have the information I need.
My html code is as follows:
<select size="6" ng-model="item" ng-options="s.name for s in itemlist"></select>
<button class="btn tt-btn-blue" ng-model="singleModel" ng-click="onLoadClicked(item.id)">Load</button>
My problem is that when the listbox paints, it has one item at the top that is blank. When I inspect the listbox during a run in Chrome, I get the following output in the console:
<select size="6" ng-model="item" ng-options="s.name for s in itemlist" class="ng-pristine ng-valid">
<option value="?" selected="selected"></option>
<option value="0">Item 1</option>
<option value="1">Item 2</option>
<option value="2">Item 3</option>
<option value="3">Item 4</option>
<option value="4">Item 5</option>
<option value="5">Item 6</option>
</select>
I am wondering how I can get rid of the first option inserted by the ng-repeat. I don't want to see a blank space at the top of the listbox. I realize one option would be to set the first actual option (value="0") as the selected item, but I would rather have no selected items to start.
Any time you see <option value="?" selected="selected"></option> in the select, it means that your ng-model is set to a value that isn't in the ng-options. So, if you don't want the blank option, you need to make sure item is set to a value in your itemlist. This could be as easy as having the following in your controller:
$scope.item = $scope.itemlist[0];
This will give it an inital value, and then angular will update it for you thereafter.
simplest way to make sure that automatically added option by angular is hidden is ng-if directive.
<select ng-options="option.id as option.description for option in Options">
<option value="" ng-if="false"></option>
</select>
I have found the solution after a long RND
Please find the following code it will work for you.
Here is the HTML Code
<div class="col-xs-3" ng-controller="GetUserADDetails">
<label>Region</label>
<select id="DDLRegion" ng-model="selectedregion" class="form-control" ng-change="getBranched(selectedregion)">
<option value="" >--Select Region--</option>
<option ng-repeat="region in Regions" value="{{region.LookupID}}">{{region.LookupValue}}</option>
</select>
</div>
Here is the Module Code
var app = angular.module("UserMasterModel", [])
.controller("GetUserADDetails", function ($scope, $http,$log) {
$http({
method: 'GET',
url: '/UserMaster/GetAllRegion'
})
.then(function (response) {
$scope.Regions = response.data;
//$log.info(response);
});
});