0

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

8
  • After your first select box, I guess this showNewCatInput() code needs to generate a new dataset, based on what subcategories are available. So you create a local array of this.subCategories that gets updated each time showNewCatInput() is fired. Commented Aug 12, 2022 at 6:24
  • That's the first thing I try, but can't get the subcategories array based on the category selected, I can get the selectedIndex value but I don't know how to do something with it. var category = document.getElementById("skill_category").selectedIndex; Commented Aug 12, 2022 at 7:05
  • On the first input value="{{category}}" Commented Aug 12, 2022 at 7:19
  • I will assume that you mean first option. The first select that shows the categories works, but for the second to work I need to use: ng-repeat="subcategory in category.subcategories", but I don't know how to replace the category.subcategories with my variable category that has the index value. I explain in the post why category.subcategories doesn't work Commented Aug 13, 2022 at 3:12
  • You will need to share your controller code, I don't think you fully understand how the template reads and gets its data-bindings from the controller. Commented Aug 15, 2022 at 6:52

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.