Выпадение зависит от другого раскрывающегося списка в AngularJS

Question

Я новичок в AngularJS.And, я пытаюсь сделать выпадающее меню, зависит от другого.

я следующие данные:

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

Этот 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> 

Второй массив зависит от 'объективной' первого.

Но это абсолютно неправильно.

Может кто-нибудь мне помочь? Спасибо за любой ответ.

Answer 1

Вы должны сначала нормализовать структуру данных. Примечание: optimization_goals становится объектом, а не массивом. Тогда это будет довольно просто:

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>

Answer 2

Как насчет того, чтобы позволить функции обрабатывать это для вас?

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