CODEWITHSUNDEEP
javascriptjqueryangularjs
HFX
HFX

Reputation: 592

Dropdown depends on another dropdown in AngularJS

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.

Upvotes: 4

Views: 112

Answers (2)

Lee.Winter
Lee.Winter

Reputation: 710

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

Upvotes: 0

dfsq
dfsq

Reputation: 193291

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>

Upvotes: 3

Related Questions