下拉菜單取決於AngularJS中的另一個下拉菜單

我是AngularJS的新手。我試圖讓下拉菜單取決於另一個下拉菜單。下拉菜單取決於AngularJS中的另一個下拉菜單

我具有以下數據：

$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>

第二個數組取決於第一的 '客觀'。

但這是絕對錯誤的。

任何人都可以幫我嗎？謝謝你的回答。

來源

2015-12-05 HFX

如果你可以隨意改變你的視圖模型;爲什麼不把目標放在目標對象內？那麼重複='item.goals'的目標會給你你請求的功能。 –

你應該先規範數據的結構。請注意，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>

來源

2015-12-05 09:45:47 dfsq

只是讓一個函數爲你處理這個問題呢？

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

});

小提琴here

來源

2015-12-05 09:40:12

下拉菜單取決於AngularJS中的另一個下拉菜單

回答

相關問題