Dropdown depends on another dropdown in AngularJS

Question

I am new to AngularJS.And i am trying to make a dropdown depends on another one.

I have following data:

$scope.objectives = [ 
    {objective: 'LINK_CLICKS'},
    {objective: 'MOBILE_APP_INSTALLS'},
    {objective: 'MOBILE_APP_ENGAGEMENT'},
    {objective: 'CONVERSIONS'}
];

$scope.optimization_goals = [
    {LINK_CLICKS: ['IMPRESSIONS', 'LINK_CLICKS']},
    {CONVERSIONS: ['IMPRESSIONS', 'OFFSITE_CONVERSIONS', 'LINK_CLICKS']},
    {MOBILE_APP_ENGAGEMENT: ['IMPRESSIONS', 'OFFSITE_CONVERSIONS', 'LINK_CLICKS']},
    {MOBILE_APP_INSTALLS: ['IMPRESSIONS', 'APP_INSTALLS', 'LINK_CLICKS']},
];

The html:

<select ng-model="selected_objective." ng-options="item.objective for item in objectives"></select>

<select ng-model="selected_optimization_goal" ng-options="opti for opti in optimization_goals | filter:selected_objective.objective"></select>

The second array depends on the 'objective' of the first.

But it is absolutely wrong.

Can anyone help me?Thanks for any answer.

Answer 1

You should first normalize the structure of your data. Note, optimization_goals becomes an object, not an array. Then it will be quite simple:

angular.module('demo', []).controller('MainCtrl', function($scope) {
    $scope.objectives = [ 
        {objective: 'LINK_CLICKS'},
        {objective: 'MOBILE_APP_INSTALLS'},
        {objective: 'MOBILE_APP_ENGAGEMENT'},
        {objective: 'CONVERSIONS'}
    ];
    
    $scope.optimization_goals = {
        LINK_CLICKS: ['IMPRESSIONS', 'LINK_CLICKS'],
        CONVERSIONS: ['IMPRESSIONS', 'OFFSITE_CONVERSIONS', 'LINK_CLICKS'],
        MOBILE_APP_ENGAGEMENT: ['IMPRESSIONS', 'OFFSITE_CONVERSIONS', 'LINK_CLICKS'],
        MOBILE_APP_INSTALLS: ['IMPRESSIONS', 'APP_INSTALLS', 'LINK_CLICKS']
    };
});

<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
    
<div ng-app="demo" ng-controller="MainCtrl">

    <select ng-model="selected_objective" ng-options="item.objective for item in objectives"></select>

    <select ng-model="selected_optimization_goal" 
            ng-options="opti for opti in optimization_goals[selected_objective.objective]"></select>
  
    <pre>{{selected_objective}}</pre>
    <pre>{{selected_optimization_goal}}</pre>
</div>