Question

我是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>

第二个数组取决于第一个数组的“目标”。

但这绝对是错误的。

任何人都可以帮助我吗？感谢您的回答。

Answer 1

您应首先规范化数据的结构。注意，optimization_goals成为一个对象，而不是一个数组。然后它会很简单：

＆＃13;

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

＆＃13;

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

＆＃13;

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

});

小提琴here

下拉取决于AngularJS中的另一个下拉列表

2 个答案: