選択を変更した後でインデックスによってトラックがリセットされない

カスケード選択オプションがあり、正常に動作しています。最初の選択オプションを変更すると、2番目の選択オプション（サブカテゴリ）が変更されます。したがって、カテゴリ（最初の選択）を変更した場合、2番目の選択では、そのオプションの位置に移動します。選択を変更した後でインデックスによってトラックがリセットされない

私が作成したこの例を確認して、オプションを変更してみてください。 2番目のselecオプションでは、前のカテゴリで選択されていた位置インデックスが保持されます。カテゴリを変更すると0になりません。

リンク：http://jsfiddle.net/Fqfg3/28/

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

出典

2016-07-05 Marco Santos

メイン選択でng-changeを使用すると、サブセレクトをデフォルトにリセットできます。私はそれが役に立てば幸い

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

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

：

ここだが、デモの作業です。

出典

2016-07-05 21:13:39 developer033

選択ボックスで空白のオプションの代わりにデータが表示されている可能性はありますか？ –

最初のオブジェクトを意味しますか？はいの場合、私は答えを編集しました。 – developer033

はい、カテゴリとサブカテゴリに最初のオプション/オブジェクトが表示されますが、難しい部分があります。オンラインで見つかった解決策は、インデックスを使用して最初のものを取得しますが、問題を作成し、サブカテゴリ、例えば –

私はあなたが例を見ることができる問題を解決することができたあなたのサブカテゴリにng-modelを追加することによりhere

これが役に立ちます。

出典

2016-07-05 16:46:42 Michael

selectiオプションでもう1つ質問がありますが、最初のオプションの情報は既に空白ではなく表示されています。 –

選択したサブカテゴリの最初の項目だけを選択したい場合は、変更機能を追加してそのように設定することができます。\t 'vm.setSub = function（item）{ \t vm.supportMail.selectedChild = vm.supportMail.selected .childs [0]; }; '' ng-change = "ctrl.setSub（）" ' – Michael

問題は、vm.supportMail.selected.childs [0]を使用して重複を取得するときです。 –

選択を変更した後でインデックスによってトラックがリセットされない

答えて

関連する問題