Javascript 依赖选择角JS_Javascript_Angularjs

Javascript 依赖选择角JS

javascript angularjs

Javascript 依赖选择角JS,javascript,angularjs,Javascript,Angularjs,我有分层数据集。有一个固定的根单位我想做的是让这棵树可以通过依赖选择进行浏览我创建了一个带有固定数据集的简单plunkr示例示例中的数据格式模仿了我在现实生活中从服务器请求获得的格式在这个简单的第一步中，这项工作很好。缺少的是，当用户在中间更改某个选择时，需要选择新选择下的选择框和NG模型绑定。因此，当我选择欧洲->法国->坎佩尔并将欧洲更改为亚洲时，第一个选择框应该是亚洲，第二个选择框应该是亚洲国家有没有一个角度的方法来处理这个问题？任何其他暗示也将受到赞赏 <!DOCTYP

我有分层数据集。有一个固定的根单位

我想做的是让这棵树可以通过依赖选择进行浏览

我创建了一个带有固定数据集的简单plunkr示例

示例中的数据格式模仿了我在现实生活中从服务器请求获得的格式

在这个简单的第一步中，这项工作很好。缺少的是，当用户在中间更改某个选择时，需要选择新选择下的选择框和NG模型绑定。

因此，当我选择欧洲->法国->坎佩尔并将欧洲更改为亚洲时，第一个选择框应该是亚洲，第二个选择框应该是亚洲国家

有没有一个角度的方法来处理这个问题？任何其他暗示也将受到赞赏

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

<head>
  <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  <script src="https://code.angularjs.org/1.3.17/angular.js" data-semver="1.3.17" data-require="angular.js@1.3.17"></script>
</head>

<body>

  <div ng-controller="Ctrl">

    <select ng-repeat="select in selects track by $index" ng-model="$parent.boxes[$index]">
      <option ng-repeat="child in select.children" ng-click="expandSelects(child)">{{child.name}}</option>
    </select>


    <ul>
      <li ng-repeat="item in boxes">{{ item }}</li>
    </ul>

  </div>


  <script>
    var app = angular.module('app', []);

    app.controller('Ctrl', ['$scope', function($scope) {

      var data = {
        'europe': {
          name: 'europe',
          children: [{
            name: 'france',
            parent: 'europe'
          }, {
            name: 'italy',
            parent: 'europe'
          }],
        },
        'asia': {
          name: 'asia',
          children: [{
            name: 'japan',
            parent: 'asia'
          }, {
            name: 'china',
            parent: 'asia'
          }],
        },
        'france': {
          name: 'france',
          children: [{
            name: 'paris',
            parent: 'france'
          }, {
            name: 'quimper',
            parent: 'france'
          }]
        }
      };

      var root = {
        name: 'world',
        children: [{
          name: 'europe',
          parent: 'world'
        }, {
          name: 'asia',
          parent: 'world'
        }, ]
      };

      $scope.selects = [root];

      $scope.expandSelects = function(item) {
        var select = data[item.name];
        if (select) {
          $scope.selects.push(select);
        }
      }

      $scope.$watch('boxes', function(item, old) {

      }, true);

    }]);
  </script>
</body>

</html>

在你的等级体系中去见孩子并不像看上去那么难。如果将“选择”设置为“角度”，并让它为您执行大部分选择（例如，使用ng选项而不是ng重复标记本身），并告诉它有哪些选项，则尝试渲染的子对象列表将成为从上面的“选择”中拾取的子对象的标准ng重复

我修改了你的plunker，向你展示了如何用一种稍微不同的方式来实现这一点

我改变的要点是

$scope.expandSelects = function() {
    var select = data[$scope.selected.name];
    if (select) {
      console.log('changed');
      console.log(select);
      $scope.chosen = select;
    }
  }

在这里，我只抓取所选的项目，该项目将使用。然后，结果看起来像

<ul>
  <li ng-repeat="item in chosen.children">{{ item.name }}</li>
</ul>

真正需要的另一个设置是使用ng选项设置，并为其提供一个要绑定的模型

<select ng-options="child.name for child in selects.children" 
    ng-model="selected" ng-change="expandSelects()">
</select>

“使用”可以在第二个“选择”上使用过滤器，以基于上一个选择过滤de选项

例如，您可以选择第一个选项来选择大陆：

<select ng-options="c for c in continents" ng-model="selectedContinent" ></select>

还有第二个选择：

<select ng-options="c.name for c in countries | filter : {parent:selectedContinent}" ng-model="selectedCountry" ></select>

对简化的数据结构进行了修改，只是为了展示过滤器的工作原理：

这是级联下拉列表的经典示例，在级联中增加了未知级别数的挑战。为了简单起见，我将数据集合并到一个对象中，为下拉列表添加了标签，并简化了select元素

此解决方案允许任何级别，因此如果您需要城市级别以下的数据，可以在不更改任何代码的情况下添加数据，如我添加到巴黎的街道示例所示

挑选{ 显示：块； } {{select.optionType} var-app=angular.module'app'，[]；应用程序控制器'Ctrl'，['$scope'，函数$scope{ 风险值数据={ optionType:'大陆'，名称：“世界”，儿童：[ { optionType:'国家'，名称:"欧洲",，儿童：[ { optionType:'城市'，名称：“法国”，儿童：[ { 选项类型：“街道”，名称：“巴黎”，儿童：[ { 名字：“第一” }, { 姓名：“第二” } ] }, { 名字：“坎珀” } ] }, { 名称：“意大利” } ] }, { optionType:'国家'，名称:"亚洲",，儿童：[ { 名称：“日本” }, { 名称：“中国” } ] } ] }; $scope.selects=[数据] $scope.clearChildren=函数索引{ $scope.selects.length=索引+2； }; }];

这很好，但我想知道，在最初加载页面时，我们是否可以设置每个选择项的ng selected属性，例如，将第一个设置为欧洲，第二个设置为法国等。