cascading drop downs in angular - javascript

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

Related

Pass currently selected list item from bootstrap plugin selectpicker into JS

I'm new to JS, I'm trying to access a selected value from a select list using the selectpicker plugin from bootstrap.
Currently my code gives me the entire list rather than just the currently selected item.
<div class="form-group">
<select class="selectpicker" name="applicationSelect">
<option value="1">app 1</option>
<option value="2">app 2</option>
<option value="3">app 3</option>
</select>
</div>
Then in my script.js file I have:
var appName = $('select[name=applicationSelect]').val(1).text();
The retrieved value will then be based onto an Ajax event, but I'm struggling to find a working example doing what I'm trying to do.
How do I retrieve only the currently selected item?
This should do the trick:
$('select[name=applicationSelect]').val()
If you specify val() with a parameter, you are actually setting the value. Without parameters, the method will just return the current value.
You can find more information here.

How to use angularjs to change the values of another select tag?

I have two Web API's that I am calling. Each value in the first api Type has an ID that needs to be used to filter the second api which is Category. The JSON is below:
// Types
[{"ID":1,"Text":"Hardware","Description":"Hardware"},
{"ID":2,"Text":"Software,"Description":"Software"}"}];
// Categories
[{"ID":1,"TypeID":1,"ParentID":0,"Name":"Printing"},
{"ID":2,"TypeID":1,"ParentID":1,"Name":"Toner"}]
First of all, you have to store selectedTypeID that will be used to filter another array, and than you can call Angular $filter in your second array.
Sintax:
$filter('filter')(array, expression, comparator)
e.g:
$filter('filter')($scope.categories, {TypeID: $scope.selectedTypeID}, comparator)
I think you're asking this: *How can I dynamically populate a select input based on the selection in another select input?
I think you can go two ways. If there is not much total data (like with Categories), you could use a filter on the second set of data. https://docs.angularjs.org/api/ng/filter/filter#!
You can do this in the HTML or in the controller!
<!-- HTML Page -->
<select>
<option ng-repeat="value in values | filter..." value=value>
</select>
// controller.js
values = ($filter('filter')(result.Values, {Id: $routeParams.Id}));
If there is lots of data to filter, consider delaying your call to the Category API until a Type is selected.
Without seeing the controller/HTML and whatnot, it's hard to give a specific answer, but I think this will get you moving in the right direction.
$scope.countries = CustomerService.getCountry();
$scope.getCountryStates = function(){
$scope.sates = CustomerService.getCountryState($scope.customer.Country);
$scope.cities =[];
};
<select ng-model="customer.State"
ng-options="x.Id as x.state for x in sates"
ng-change = "getStateCities()"
class="form-control"
ng-required="true"
id="state">
<option value="">-- Choose State --</option>
</select>
<select ng-model="customer.City"
ng-options="x.Id as x.city for x in cities"
class="form-control"
ng-required="true"
id="city">
<option value="">-- Choose City --</option>
</select>
Check complete code with demo

Get rid of blank entry in select tag

I have a number of items that get their data from a Json object and populate it using angular.
<select ng-model="MyCtrl.cargoList">
<option ng-repeat="cargo in MyCtrl.cargoList">{{ cargo.name }}</option>
</select>
And whenever I load the form, I get something like this in my console:
<select ng-model="MyCtrl.cargoList">
<option value="? object:25 "?></option>
<option value="">Gloves</option>
<option value="">Jacket</option>
<option value="">Shoes</option>
</select>
I can get the values to appear just fine, but I can't seem to get rid of the very first option. I don't mind the select box showing the very first element in the list, but I don't want it to be a blank line. How do I get rid of it?
You need to select 1st option by default on ng-init="MyCtrl.selectedCargo=MyCtrl.cargoList[0].name" & ng-model name should not be same as that of your cargoList.
Markup
<select ng-model="MyCtrl.selectedCargo" ng-init="MyCtrl.selectedCargo=MyCtrl.cargoList[0].name">
<option ng-repeat="cargo in MyCtrl.cargoList" value="cargo.name">{{ cargo.name }}</option>
</select>
Demo Plunkr
Use ngOption <option>
The ngOptions attribute can be used to dynamically generate a list of <option> elements for the <select> element using the array or object obtained by evaluating the ngOptions comprehension expression.
I have used following expression
label for value in array
HTML
<select ng-model="MyCtrl.cargo" ng-options="cargo.name for cargo in MyCtrl.cargoList">
</select>
and In your controller set model value as first element of list
this.cargo = this.cargoList[0]
Also note: You can use MyCtrl.cargoList as model as well as array So you should use another variable to hold the model value.
Use ng-options instead of ng-repeat
<select ng-model="MyCtrl.selectedListItem" ng-options="cargo for cargo in MyCtrl.cargoList"></select>
You can fine tune the labels/values further if you like, check the documentation here - https://docs.angularjs.org/api/ng/directive/ngOptions
You can ng-init, or set the first value to defualt, something like
MyCtrl.selectedListItem = MyCtrl.cargoList[0]
So if you want a function to detect you have changed the value of the select you would use ng-change like so :
<select ng-model="MyCtrl.selectedListItem" ng-options="cargo for cargo in MyCtrl.cargoList" ng-change="selectChanged"></select>
In your controller
$scope.selectChanged = function(){
//apply your logic
};

dropdown and textarea binding with AngularJS

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

Startup value does not set selected value

I've made a simple angular.js example which shows my problem: example
I want to set the start value of the select element to a specific value.
<select name="i" id="i" ng-model="selectedItem">
<option ng-repeat="i in items" value="{{i}}">{{i}}</option>
</select>
The options and the select element get rendered perfectly. But, like in the example, when i set the value in my controller to 6, the selected value on the page is still the first element.
scope.selectedItem = 6;
There are 2 simple buttons which just change the selected value. When you press them the selection change without problems.
EDIT: i updated the jsfiddle and removed unused code and renamed code to make things a bit more clear
EDIT2: I missed to ask if it is possible to fix the second select element too? The different is that this array contains objects instead of numbers.
<select name="o" id="o" ng-model="selectedItem">
<option ng-repeat="o in objects" ng-value="{{o.ID}}">{{o.Text}}</option>
</select>
You should not use ngRepeat to render option elements, it's not supposed to work properly with select and options. Use ngOptions which will work as expected with ngModel:
<select name="i" id="i"
ng-model="selectedItem"
ng-options="i for i in items">
</select>
For the second selectbox which has ngModel bound to ID property of the objects in array, it will be:
<select name="o" id="o"
ng-model="selectedItem"
ng-options="obj.ID as obj.Text for obj in objects">
</select>
Demo: http://jsfiddle.net/d3jf7ueq/9/

Categories

Resources