下拉菜单取决于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中的另一个下拉菜单

回答

相关问题