CODEWITHSUNDEEP
javascriptangularjs
nick
nick

Reputation: 70

angularjs - select with object of object as options

I'm currently trying to build a AngularJS app with a complex data structure.

The data source is an array of people with languages and skill level. I need to filter those people by language skill, to do so I tried to build a select with the languages and another select with the skill levels, but i failed.

Here is a plnkr of my effords

Maybe there is also a simpler/better way to structure the data array ($scope.people)

Upvotes: 3

Views: 83

Answers (2)

tennisgent
tennisgent

Reputation: 14201

Your problem is that you're not actually looping through each person's languages array in your ng-options directive. And I don't believe such a thing is actually possible given how your data is structured. I don't think you can loop through nested arrays (or at least I'm not aware of any ng-options syntax that would allow for such a thing.

So to make things easier, I would suggest doing the following in your controller:

$scope.langs = [];
angular.forEach($scope.people, function(person){
    angular.forEach(person.languages, function(lang){
        $scope.langs.push({
            lang: lang.lang,
            skill: lang.skill,
            name: person.name,
            gender: person.gender
        });
    });
});

This will give you an array that will allow you to filter using ng-options with the `orderBy' filter.

Upvotes: 1

Nidhish Krishnan
Nidhish Krishnan

Reputation: 20741

Take a look at this

Working Demo

Html

<div ng-app='myApp' ng-controller="MainCtrl">LANGUAGES:
    <select ng-model="selectLang" ng-options="lang as lang for lang in languages"></select>
    <br>SKILL:
    <select ng-model="selectSkill" ng-options="skill as skill for skill in skills"></select>
    <br>
    <button ng-click="getPeople()">Submit</button>
    <br>PEOPLE:
    <select ng-model="selectPeoples" ng-options="people as people for people in peoples"></select>
</div>

script

var app = angular.module('myApp', []);
app.controller('MainCtrl', function ($scope) {

    $scope.people = [{
        "name": "Jane Doe",
            "gender": "Female",
            "languages": [{
            "lang": "German",
                "skill": "Good"
        }, {
            "lang": "English",
                "skill": "Very Good"
        }]
    }, {
        "name": "John Doe",
            "gender": "Male",
            "languages": [{
            "lang": "French",
                "skill": "Good"
        }, {
            "lang": "English",
                "skill": "Very Good"
        }]
    }];

    $scope.languages = [];
    $scope.skills = [];
    angular.forEach($scope.people, function (peopleValue, peopleKey) {
        angular.forEach(peopleValue.languages, function (langValue, langKey) {
            $scope.languages.push(langValue.lang);
            $scope.skills.push(langValue.skill);
        });
    });

    $scope.languages = _.uniq($scope.languages);
    $scope.skills = _.uniq($scope.skills);



    $scope.getPeople = function () {
        $scope.peoples = [];
        angular.forEach($scope.people, function (peopleValue, peopleKey) {
            angular.forEach(peopleValue.languages, function (langValue, langKey) {
                if (langValue.lang === $scope.selectLang && langValue.skill === $scope.selectSkill) {
                    $scope.peoples.push(peopleValue.name);
                }
            });
        });
    }
});

Upvotes: 1

Related Questions