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.

If you are free to change your viewmodel; Why not place the goals inside the objectives object? then a repeat='goal in item.goals' would give you the functionality you requested. — Marvin Smit
– Marvin Smit, Commented Dec 5, 2015 at 9:34

dfsq · Accepted Answer · 2015-12-05 09:45:47Z

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>

Lee.Winter · Accepted Answer · 2015-12-05 10:11:06Z

How about just letting a function handle this for you?

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

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

  $scope.objectiveChanged = function(){
    for(var i = 0; i < $scope.optimization_goals.length; i++){
      if($scope.optimization_goals[i][$scope.selected_objective.objective]){
        $scope.filteredGoals = $scope.optimization_goals[i][$scope.selected_objective.objective];
      }
    }

  }

$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']},
];

});

Fiddle here

Collectives™ on Stack Overflow

Dropdown depends on another dropdown in AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related