I have a controller:
app.controller("AllController", function($scope, $http){
$scope.listSkills = function() {
$http.get("/showSkills").success(function(skills_from_database){
$scope.skills = skills_from_database.list;
})
}
});
This is the html with both selects, but only the first one works:
<select name="skill_category" id="skill_category" form="AddSkillForm" onclick="showNewCatInput()">
<option value="newCat">New category</option>
<option ng-repeat="category in skills" value="{{category.categoryName}}">{{category.categoryName}}</option>
</select>
<select name="skill_subcategory" id="skill_subcategory" form="AddSkillForm" onclick="showNewSubCatInput()">
<option value="newSubCat">New subcategory</option>
<option ng-repeat="subcategory in category.subcategories" value="{{subcategory.subcategoryName}}">{{subcategory.subcategoryName}}</option>
</select>
So I know that to get all the subcategories I need the category selected on the first select, but I don't know how to do it. As I read, I think that I need to use ng-model, but even if I could connect the 2 selects, it would still not work the second one.
That is because I can't access the subcategory with this:
ng-repeat="subcategory in category.subcategories"
Simply because "category" doesn't exist there, so where it comes? from this other code that works:
<div ng-repeat="category in skills">
<h1>{{category.categoryName}}</h1>
<div ng-repeat="subcategory in category.subcategories">
<h2>{{subcategory.subcategoryName}}</h2>
</div>
</div>
As you can see, I know I have to access to "category in skills" first, but what I need is not all categories in skills, I need just the selected category.
So to summarize the problems:
Don't know how to use ng-model to bind 2 selects and
don't know how to access the subcategories from the selected category
The json data and angular scope can be found in this other post that I made yesterday, there you can also see the html/angular code that works to get the category and subcategory.
Stackoverflow post
Related
I want to display the country in response from dropdown. I tried a lot and I could not find any solution.
I am using a JavaScript link "http://iamrohit.in/lab/js/location.js".
I am getting the selected country name from JSON response but can't compare it with the dropdown list and display the response value.
My HTML :
<select name="country" class="form-control1 drop countries" required ng-model="model.country" placeholder="select" id="countryId sel1"><option value="" disabled selected>Select</option>
My controller :
$scope.model.country = "India"; //from json response
I saw this "<option value="? string:India ?"></option>" when I inspect the country field in the profile page.
If you want to view what option is selected, the you will indeed put your ng-model in your tag.
But if I understand correctly, you want to create different options according to your JSON data.
I suggest using:
<select>
<div ng-repeat= "x in model.country">
<option> {{x.Name}} </option> //I suggest dividing your JSON information
</div>
</select>
I hope this answers your questions. Let me know if you need more precise information!
I have two select. If you chose an item in the first, automatically the second one fills with the subarray. It works. But I want to add new field, same field but isolated. Now, if I add new fields, the others selection change. I want to prevent this. How can I do? Thank you! CODE
<div data-ng-repeat="food in foods track by $index">
<select ng-model="select1" ng-options="a.id as a.nome for a in list.products" ng-change="selectLot(select1)">
<option value="">-- Select Product --</option>
</select>
<select ng-model="select2" ng-options="a.id as a.value for a in Subarray" ng-if="Subarray" ng-change="lotSelect(select2)">
<option value="">-- Select Lot --</option>
</select>
</div>
<button ng-click="newLine();">Add Line</button>
<button ng-click="removeLine();" class="{{$index}}">Remove</button>
<h1>INFO ABOUT SELECTION</h1>
{{allInfo}}
P.S. also {{allInfo}} doesn't work and I don't know why... (it should contains the info, like HERE
Your code should look like this:
as you can see, I send the selectedProduct to the second selection.
<select ng-model="selectedProduct" ng-options="a as a.nome for a in list.products">
<select ng-model="selectedLot" ng-options="a as a.id for a in selectedProduct.lots" ng-if="selectedProduct.lots">
You won't need to change anything in the controller.
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
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
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