managing the same several select inputs on one page with angularjs - javascript

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?

Related

jQuery Mobile Multi-Select from asynchronous data

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

cascading drop downs in angular

I am trying to get some cascading drop downs in angular that populate based off of what the previous drop down has selected. So basically there are 5 drop downs total, at first only the first drop down would be populated, and then the second one would populate based off of what is picked in the first (hopefully using $http to get the new info back form server base don what is picked) and so on all the way down to 5.
So basically I have this :
<select class="selectScope" ng-model="scope1">
<option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>
<select class="selectLevel1" ng-model="scope2">
<option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>
<select class="selectLevel2" ng-model="scope3">
<option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>
<select class="selectLevel3" ng-model="scope4">
<option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>
<select class="selectLevel4" ng-model="scope5">
<option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>
I will have populate the first dropdown with an $http, but without going into detail I am just wondering if I can have the dropdowns trigger off each other. If i have selected all the way down to level 5 and I re-select level 3 - then 4 and 5 would empty (4 would re populate based on what was picked in 3). SO I just want them to work off each other. I am wondering if something like this is possible in angular. Apologies if this is a bit oblivious, I am brand new to using angular. Thanks!!
Firstly, you should be using ng-options instead of an ng-repeat
<select ng-model='scope1' ng-change='scope1Change()'
ng-options='obj.id as obj.name for obj in array'>
</select>
Then, on the ng-change event of the select, you can load the appropriate data for the following selects.
$scope.scope1Change = function() {
//Build URL based on selection
$http.get(myUrl).then(function(data){
//transform data if required
$scope.array2 = data;
});
}
You can keep the other select statements disabled based on previous values being selected
<select class="selectLevel1" ng-model="scope2"
ng-options='obj.id as obj.name for obj in array2' ng-disabled='!scope1'>
</select>
You would need some additional logic in the change events to work out whether or not you should clear the $scope model values as required, but that is pretty straightforward

How do I determine if different sections of a checkbox dropdown menu are selected?

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...

jquery mobile multipage dropdown not displaying selected value

I have written my first jquery mobile site using their multipage template.
In my application, Changes in the main page can affect the selected value in a drop down in a sub page. The first time I go to the sub page, the correct option is selected and displayed. After that, when I go to the sub page, the correct option is selected (ticked), but the wrong option is displayed.
I created a jsfiddle to demonstrate this... http://jsfiddle.net/afePj/2/
page one lets you select an option...
<select name="selectname1" id="selectid1" onChange="changePageTwo()">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
...and sets the selected value on page two to match...
function changePageTwo() {
select1 = document.getElementById('selectid1');
select2 = document.getElementById('selectid2');
select2.selectedIndex = select1.selectedIndex;
}
...when you arrive on page two I would like the selected value to be displayed. But after the page has been displayed once, the option it shows never changes...
<select name="selectname2" id="selectid2">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
Any ideas about how I can make the sub page display the selected value?
Thanks
When you update a select menu in jQuery Mobile you need to call the select menu widget's refresh menu so that the display is updated to match the native elements
For example
$('selectid2').selectmenu('refresh');
http://jsfiddle.net/afePj/4/

Select model according to brand drop down

i have two drop down boxes
the first drop down contain the mobile brands
and other contains the mobile models
i want them to work like when in first drop down a brand is selected
the second drop down will show models of that particular brand i want to do it with javascript
the drop down values are static values
how i can do that?
<select name="brand">
<option value="samsung">Samsung</option>
<option value="Nokia">Nokia</option>
</select>
<select name="model">
<option value="Galaxy">Galaxy</option>
<option value="N8">N8</option>
</select>
The Drop down will be like the above ones
Use ajax record on the first celect box change and fill it in the second select box. Jquery ajax will function will send data to a function which will fetch data from database .

Categories

Resources