從ng-options中為AngularJS中的另一個select語句選擇值

Question

我想為我的站點設置變量選擇下拉菜單。 基本上，功能是這樣的：

我想要一個主要的下拉菜單。

<select>
<option> 1 </option>
<option> 2 </option>
<option> 3 </option>
</select>

<select>
<option> a </option> //only show if option 1 chosen above
<option> b </option> //only show if option 1 chosen above
<option> c </option> //only show if option 2 chosen above
<option> d </option> //only show if option 3 chosen above
</select>

在其旁邊的第二個下拉菜單中，該值會根據選擇的選項而變化。 我的Angular經驗有限，我很難找到有關此的任何信息。

我可以用ng-options填充我的第一個下拉列表，效果很好。

<select class="myclass" ng-model="selection" ng-options="opt as opt.label for opt in Options"></select>
<select class="myclass" ng-model="selection2" ng-options="opt2 as opt2.label for opt2 in {{pick.options}}"></select>`

我的控制器在哪里

$scope.Options=[{label:1},{label:2},{label:3}];
$scope.selection = $scope.Options[0];

//and here is where I run into problems. 
$scope.subOptions1=[{label:a},{label:b}];
$scope.subOptions2=[{label:c}];
$scope.subOptions3=[{label:d}];

$scope.selection2 = selectSub();
$scope.pick = {options: pickSub()};

function pickSub(){
    if ($scope.selection.label == 1) {
        return 'subOptions1';
    }
    if ($scope.selection.label == 2) {
        return 'subOptions2';
    }
    if ($scope.selection.label == 3) {
        return 'subOptions3';
    }
}
function selectSub(){
    if ($scope.selection.label == 1) {
        return= $scope.subOptions1[0];
    }
    if ($scope.selection.label == 2) {
        return = $scope.subOptions2[0];
    }
    if ($scope.selection.label == 3) {
        return = $scope.subOptions3[0];
    }
}

對此，我們將提供任何指導。

Answer 1

其他兩個答案都可以，但是似乎有點過分設計。 這是我對您的html的建議：

 <select data-ng-model="option" data-ng-options="option as option.name for option in options"></select>
 <select data-ng-model="subOption" data-ng-options="subOption as subOption for subOption in option.subOptions"></select>

然后在您的控制器中定義以下內容：

$scope.options = [
    { name: "Option 1", subOptions: ["a", "b"] },
    { name: "Option 2", subOptions: ["c"] },
    { name: "Option 3", subOptions: ["d"] }
]

這是一個帶有示例的工作jsFiddle： http : //jsfiddle.net/BCK8w/

Answer 2

試試這個，它應該可以幫到您。

http://plnkr.co/edit/RHfG9P?p=preview

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.model={};
  $scope.model.suboptions1 = [{name: "suboption1-1",}, {name: "suboption1-2"}];
  $scope.model.suboptions2 = [{name: "suboption2-1",}, {name: "suboption2-2"}];
  $scope.model.data=[{name: "option1",suboptions: $scope.model.suboptions1}, {name: "option2",suboptions: $scope.model.suboptions2}];
});


app.directive("optionsduo", [function() {

  return {
    restrict: "EA",
    templateUrl: 'multiselectmovetmplt.html',
    scope: {
      data: '=',
    },
    link: function(scope, element, attrs) {
      scope.$watch('optselected', function(val) {
        console.log(scope.optselected);
        scope.suboptions = scope.optselected.suboptions;
      });
    }

  };

}]);

的index.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div optionsduo data="model.data"></div>
  </body>

</html>

指令模板

<table>
  <tr>
    <td>
      <select ng-model="optselected" ng-options="d.name for d in data"></select>
    </td>
    <td>
      <select ng-model="suboptselected" ng-options="d.name for d in suboptions">    </select>
    </td>

基本上，我將與子選項相關的數據保存在相關選項本身中，並且它們在指令內的選項上注冊監視。

從ng-options中為AngularJS中的另一個select語句選擇值

問題描述

2 個解決方案

解決方案1
1 2014-06-25 20:09:37

解決方案2
0 已采納 2014-06-25 19:13:36

的index.html

指令模板

從ng-options中為AngularJS中的另一個select語句選擇值

問題描述

2 個解決方案

解決方案1 1 2014-06-25 20:09:37

解決方案2 0 已采納 2014-06-25 19:13:36

的index.html

指令模板

解決方案1
1 2014-06-25 20:09:37

解決方案2
0 已采納 2014-06-25 19:13:36