I have a little problem with jQuery Mobile and AngularJS.
I want a multi-select so the user can chose a category. Categories have parents and childs. The whole structure comes from a database so its an asynchronous call to get the data.
The problem is that the select element has the data but doesn't show it unless you click on the first empty option.
Maybe i'll better show than tell
http://plnkr.co/edit/7UwGjSRfGEnhIvSrtGjV
<div ng-show="catsready" id="jqselect">
<label for="multiselect" class="select">Multi-select:</label>
<select id="multiselect" multiple="multiple" data-native-menu="false" data-icon="bars" data-iconpos="left">
<option>Choose a few options:</option>
<optgroup ng-repeat="parent in cats" label="{{parent.name}}">
<option ng-repeat="child in parent.childs" value="" jq-select>{{child.name}}</option>
</optgroup>
</select>
</div>
After angular has added/changed the optiongroups and options, you need to tell jQM to refresh the selectmenu widget:
$("#multiselect").selectmenu("refresh", true);
API Doc: http://api.jquerymobile.com/selectmenu/#method-refresh
Related
I have a multi-select field in materialize:
<select multiple>
<option value="somevalue" class="{{#if $eq isActive}}active{{/if}}">Some Value</option>
</select>
and want to auto select any values returned from the database when the user goes into edit mode.
In looking at the section in chrome dev tools I see it creates an li with a checkbox and the li has class="active" when it's checked.
I've tried setting that class programmatically in javascript, but still the selections aren't checked.
Is there something special I need to do to get those options to check "automatically" for edit modes?
I'm using Meteor and Blaze to create this layout, so keep that in mind.
The below approach should work,
<select multiple>
{{#if $eq isActive}}
<option value="somevalue" selected="selected">Some Value</option>
{{else}}
<option value="somevalue">Some Value</option>
{{/if}}
</select>
Also, make sure that the helper that determines whether the item is active or not to return the correct value.
I have a very simple scenario and I wanted to use AngularJS for that. I am not able to get this one right.
I am retrieving data from database and directly writing it into the view inside dropdown. From their based on which item is selected, I want to populate the value into textbook.
So my code for it is as follows:
<select>
<option selected="selected" disabled="disabled">dropdown</option>
#foreach (System.Data.DataRow row in ViewBag.Template.Rows)
{
<option value="#row[1].ToString()">#row[0].ToString()</option>
}
</select>
<textarea></textarea>
I am trying to achieve following:
whatever option user select, the corresponding value for the item be populated into text area.
Please suggest how can I achieve using AngularJS.
You should use ngModel directive for that, the same for both select and textarea:
<select ng-model="selectModel">
<option selected="selected" disabled="disabled">dropdown</option>
#foreach (System.Data.DataRow row in ViewBag.Template.Rows)
{
<option value="#row[1].ToString()">#row[0].ToString()</option>
}
</select>
<textarea ng-model="selectModel"></textarea>
Demo: http://plnkr.co/edit/XOs6wUyqdr3ZlFtBq3RB?p=preview
I am having a multiselect dropdown whose value are populated based on iteration through for each. However the order I am sending the data is not maintained.
Please suggest what should I do.
<select id="secWhse" path="secondaryWarehouse" multiple="true" style="display: none;"
title="Select the secondary warehouse to which you want to give access to the user.">
<option value="1">Enterprise</option>
<option value="14">enter2</option>
<option value="17">enter3</option>
<option value="19">4thenterprise</option>
</select>
But if I am able to print the value directly, Its printing in my order.
UPDATE: Plugin we are using is: http://wenzhixin.net.cn/p/multiple-select/docs/#multiple-select
CODE:
$('#secWhse').multipleSelect({ filter: true,multiple: true});
JSP code to populate select tag:
${item.value}
I have a multiselect dropdown menu where each option has a checkbox and more than one option can be selected at once. I'm using a jQuery multiSelect plugin generate the dropdown.
<select id="types" multiple="multiple" size="5">
<option value="">Show All</option>
#{
<option value="Gains">Gains</option>
<option value="Losses">Losses</option>
<option value="Adjustments">Adjustments</option>
<option value="Future">Future</option>
<option value="Deliveries">Deliveries</option>
<option value="Recoveries">Recoveries</option>
<option value="Full Payout">Full Payout</option>
<option value="Early Payout">Early Payout</option>
<option value="Charge Offs">Charge Offs</option>
<option value="Returns">Returns</option>
<option value="Transfers">Transfers</option>
<option value="Ins. Write-offs">Ins. Write-offs</option>
}
</select>
What I need to be able to do is separate the options into 2 sections. The first 4 in a section and the last 8 in a section. If an option is selected in one section, then any options that are selected in the other section are then unselected. This is already setup in a C# .NET application. I am having to replicate the functionality. I don't have access to the .NET code. At first I thought maybe I could put the different options into separate divs and just check whether an option was selected in each div but I get validation errors when I try to do that. I'm not really sure what else I could try. Any help with this would be great. Thanks.
try using classes, attach a jquery check box click(), check for class if ( $(this).hasClass("checkboxSection1") ) then uncheck all the other ones like so $(".checkboxSection2").prop('checked', false);
so some simple code is
$("myForm :checkbox").click( function(){
$(this).hasClass("checkboxSection1")?
$(".checkboxSection2").prop('checked', false):
$(".checkboxSection1").prop('checked', false);
});
How about giving them a set of classes e.g. 'option1' & 'option2', then you can do a little javascript/jquery to handle the logic of the selection process...
the case is:
We're loading about 20 requests(entities) items on page load, and then 20 more on scrolling down, i.e. infinite scroll.
Each request has select dropdown with statuses, and another select with managers, so user can select manager and status and update the request via ajax. When page is refreshed, the updated request has status and manager dropdowns selected with appropriate values.
angular provides ngOptions solution for populating selects, but I have no idea how to organize ngModel for all these selects on this page.
<div class="request" ng-repeat="request in page.requests">
{{request.created}}
{{request.title}}
//etc..
//here we have selects
<select class="managersSelect">
<option value="">choose manager</option>
<option
ng-repeat="manager in page.managers"
ng-selected="request.manager_id == manager.id"
value="{{manager.id}}">{{manager.name}}
</option>
</select>
//and second one
<select class="statusesSelect">
<option
ng-repeat="status in page.statuses"
ng-selected="request.status == status.id"
value="{{status.id}}">{{status.title}}
</option>
</select>
</div>
Currently I use a combination of ng-repeat and ng-selected, and it solves the problem, but how to organize ng-model for implementing recommended ng-options way?