Question

我有一个级联选择选项，并且运行良好，问题是当我更改第一个选定选项时，在第二个选择选项（子类别）中，它保留索引。所以我改变了类别（第一个选择），在第二个选择中它转到了它的选项位置。

为了更好地理解，请查看我做的这个例子并尝试改变选项。您会注意到，在第二个选择选项中，保留选择了上一类别中的位置索引。更改类别时它不会从0开始。

JS：

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

app.controller('PeopleCtrl', function ($http,$scope) {
    vm = this;

    vm.options = [
  {
    "_id": "1",
    "label": "Category 1",
    "childs": [
      "Category 1 -> Subcategory 1",
      "Category 1 -> Subcategory 2",
      "others"
    ]
  },
  {
    "_id": "2",
    "label": "Category 2",
    "childs": [
      "Category 2 -> Subcategory 1",
      "Category 2 -> Subcategory 2",
      "others"
    ]
  },
  {
    "_id": "3",
    "label": "Category 3",
    "childs": [
       "Category 3 -> Subcategory 1",
      "Category 3 -> Subcategory 2",
      "others"
    ]
  }];


});

HTML：

<div ng-app="app" ng-controller="PeopleCtrl as ctrl" class="container">
 {{ctrl.options}}

 <div class="form-group question-wrapper">
                <select class="form-control"
                        name="category"
                        ng-options="option.label for option in ctrl.options track by option._id"
                        ng-model="ctrl.supportMail.selected">
                </select>

            </div>

            <div class="form-group question-wrapper">
                <select  id="sub" class="form-control"
                        name="subcategory"

                       >
                    <option  ng-repeat="child in ctrl.supportMail.selected.childs track by $index">{{child}}</option>

                </select>
            </div>
</div>

Answer 1

通过在您的子类别中添加jq .[0].parent.user.geo_enabled我能够解决问题，您可以看到示例here

希望这有帮助。

Answer 2

您可以在主选择中使用ng-change将子选择重置为默认值。

这是一个示范工作：

＆＃13;

(function() {
"use strict";
  angular.module('app', [])
    .controller('mainCtrl', function() {
      var vm = this;

      vm.options = [  
         {  
            "_id":"1",
            "label":"Category 1",
            "childs":[  
               "Category 1 -> Subcategory 1",
               "Category 1 -> Subcategory 2",
               "others"
            ]
         },
         {  
            "_id":"2",
            "label":"Category 2",
            "childs":[  
               "Category 2 -> Subcategory 1",
               "Category 2 -> Subcategory 2",
               "others"
            ]
         },
         {  
            "_id":"3",
            "label":"Category 3",
            "childs":[  
               "Category 3 -> Subcategory 1",
               "Category 3 -> Subcategory 2",
               "others"
            ]
         }
      ];

      vm.reset_subSelect = function() {
        vm.supportMail.child = vm.supportMail.selected.childs[0];
      }
    });
})();

＆＃13;

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl as ctrl">
  <div class="container">
    <div class="form-group question-wrapper">
      <select class="form-control" name="category" ng-options="option.label for option in ctrl.options track by option._id" ng-model="ctrl.supportMail.selected" ng-change="ctrl.reset_subSelect()" ng-init="ctrl.supportMail.selected = ctrl.options[0]">
      </select>
    </div>
    <div class="form-group question-wrapper">
      <select class="form-control" id="sub" name="subcategory" ng-options="child for child in ctrl.supportMail.selected.childs" ng-model="ctrl.supportMail.child" ng-init="ctrl.supportMail.child = ctrl.supportMail.selected.childs[0]">
      </select>
    </div>
  </div>
</body>

</html>

＆＃13;

我希望它有所帮助。

更改选择后，按索引跟踪不会重置

2 个答案: