Angular select model not setting value - javascript

I have an array of strings, that are account numbers. When a record in a table is clicked i provide a modal to update the record and one of the fields is account number. This displays and some what correctly but seems to loss its two way binding with vm.accountNumber but also does show the value that the model is.
vm.accountNumber always has a value that is set when the table row is being clicked for editing. It just never makes it to the select despite the model. I suspect im losing the two way link and it is creating its own variable for the model.
<select class="ui search fluid selection dropdown" id="accountSearch" ng-model="vm.accountNumber">
<!--ng-options="account for account in vm.accounts.slice(1)">-->
<option ng-repeat="account in vm.accounts | limitTo: vm.accounts.length : 1" value="account" ng-selected="account == vm.accountNumber">{{account}}</option>
</select>
Here is a snippet of the accounts array.
0:"-"
1:"0001"
2:"0002"
3:"0003"
4:"0004"

I would say just use ng-options directive instead of ng-repeating option
<select class="ui search fluid selection dropdown"
id="accountSearch" ng-model="vm.accountNumber"
ng-options="account for account in vm.accounts">
</select>
Demo Plunkr
Though I'd like to point out your problem was with option value attribute,
you should change
value="account"
to
value="{{account}}"

Related

Search functionality using multiple select option - angularjs

Now I am working in an search functionality module using angularjs, search functionality is implemented by multiple select options, user can select more than one option in select tag, it's not a problem, but I am facing issue to load the saved search details into the select tag,(have to show pre-selected search data into the select tag)
<select name="" ng-model="sex" multiple ng-options="sex.name as sex.name for sex in choosesex">
</select>
which displays the list like Male and Female like below,
$scope.choosesex = [{ID:1,name:"Male"},
{ID:2,name:"Female"}];
I have get the json response from saved search, while pushing the result into the ng-model it doesnot show the selected option in select tag, Please share your opinions regarding this issue to fix. Thanks in advance.
sex.name as sex.name is not right. Try this:
<select name="" ng-model="sex" multiple ng-options="sex as sex.name for sex in choosesex"></select>

HTML select using ng-options with multiple "default" options

I am currently trying to make a drop down menu that runs off of a model but also has two "default" options that are at the top. Currently I have the following:
<select class="category-selector" chosen
inherit-select-classes="true"
ng-if="auction.category_options.length > 1"
ng-model="auction.active_category"
ng-options="g.label group by g.main_category for g in auction.category_options"
ng-change="auction.active_category == null ? auction.clear_keyword_matching() : auction.refresh_matching_items()">
<option value="" selected>Active items ({{auction.category_counts['Active'].total}})</option>
<option value="all">All items ({{auction.category_counts['All'].total}})</option>
</select>
I am having trouble getting the "All items" option so show up in the dropdown. Is it not possible to declare two options and populate the rest using the ng-options / model?
Image of dropdown
Adding extra option tags only works if you set value="" for the additional options
<option value="" selected>...</option>
As soon as the value isn't empty, it will not show, as explain here. So you will probably need build this using ng-repeat.
In this answer, there is a solution using a directive, maybe that could work.

Best way to handle changes of <select>

On my main page (index.html) I have a list of some objects which have a category field for example. And on top of page I have element selecting category. So, what is best way to handle it like this: when changes selected category in - change a list of objects (view only objects with selected category).
Can I make it using only Java+Spring+Thymeleaf or I have to use JavaScrypt or other tool also?
UPDATE: My code
<div class="grid-30">
<select id="selectCategory" th:field="${selected.id}">
<option th:each="category : ${allCategories}" th:value="${category.id}" th:text="${category.name}">All Categories</option>
</select>
</div>
so when element changes I want it toggles move to url "/category/"+${selected.id}

Semantic UI: Dropdown default/placeholder value issue

I'm working on creating a html form using 'Semantic UI' framework. While I'm using a normal select item for a dropdown/select list, I'm styling it using Semantic UI. Everything works fine, but once I select a value from the dropdown, I can't deselect the option/value as an end user.
Suppose in this FIDDLE , if I select 'male', and again want to de-select the option and show the placeholder/default text 'Gender', I'm not able to. Can someone help me figure out a way to make the select work as a regular html select item rather than a dropdown ?
HTML Code
<div class="field">
<label style="width: 250px">Select a Gender</label> <select
name="skills" class="ui fluid dropdown">
<option value="">Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
JavaScript Code
$(".ui.fluid.dropdown").dropdown({})
Try this :
$('select.dropdown').dropdown({placeholder:'Your placeholder'});
see Semantic UI (or Semantic UI CN for a Chinese version) for more info.
In the classic HTML <select> element, it treats your empty valued <option value="">Gender</option> as another dropdown menu item.
However, Semantic UI uses the empty valued <option> as the placeholder text. If you want Gender as a selectable option, it should really be another item that is independent of your placeholder text.
If you want the ability to clear the selection, I think there are better UX paradigms to handle this. For example, you could have an external clear selection button which calls:
$('.ui.fluid.dropdown').dropdown('clear')
Another more streamlined option might be to use the multi-selection dropdown, and limit the maxSelections = 1, the first example from the examples page. That way the user gets an impression that they have selected something, and to clear the selection they use an element within the same dropdown container.
You should know that .dropdown() in Semantic UI removes any null value from your select by default.
Nevertheless, there are some approaches to what you are looking for.
Check this fiddle.
You can achieve this with the snippet below.
<div class="ui selection dropdown">
<input name="gender" type="hidden" value="default">
<i class="dropdown icon"></i>
<div class="text">Default Value</div>
<div class="menu">
<div class="item" data-value="default">Default Value</div>
<div class="item" data-value="0">Value</div>
<div class="item" data-value="1">Another Value</div>
</div>
</div>
You can take a look at here https://semantic-ui.com/modules/dropdown.html#/examples. Also you can use 'clearable'.
If you wanna pass this value to back-end, keep in mind that the selected value is in the input.
$('.ui.dropdown').dropdown({
clearable: true
});

On select of dropdown value, the corresponding appropriate value should be populated in textbox

On select of dropdown value, the corresponding some appropriate value should be displayed in textbox. How to do this in Angular js? Like I have dropdown:
<select class="input-medium" ui-select2 name="affiliate" required ng-model="payout.affiliate.id" required gt-input-msg gt-error-msgs="gtErrorMsgs">
<option></option>
<option ng-repeat="s in affiliateList" value ={{s.id}}>{{s.affiliateName}}</option>
</select>
On select of any value I should be able to display property affiliate.points in some other div or textbox.
Kindly help me.
You could use the ngChange directive on the select element like so:
<select ng-model="selectedAffiliate" ng-change="GetAffiliatePoints(selectedAffiliate)"></select>
When the select value changes the selectedAffiliate property on your scope is updated to hold the selected value. Then you can look up the points for that affiliate and display them somewhere.

Categories

Resources