从ng-options中为AngularJS中的另一个select语句选择值

时间:2014-06-25 18:54:50

标签: javascript css angularjs

我想为我的网站制作变量选择下拉菜单。 基本上功能是:

我想要一个主要的下拉列表。

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

我很感激有关此事的任何指导。

2 个答案:

答案 0 :(得分: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/

答案 1 :(得分:0)

试试这个,它应该为你做到这一点。

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>

基本上我持有与相关选项本身的子选项相关的数据,并且他们在指令内的选项上注册。