異なるモデルで選択要素を動的に生成する方法は？

私はng-repeatを持っています。私はページ上に新しいselect要素を生成します。それはうまく動作し、それらはすべてのオプションと共に作成されます。問題は、それらが同じng-modelを持つことになり、ページに複数のselectがある場合、最初のものだけがデフォルトの選択値を取得し、選択された項目を変更すると、他の選択項目の選択項目は選択解除されます。異なるモデルで選択要素を動的に生成する方法は？

<div ng-repeat="item in items"> 
    <div ng-if="item.type === 'select'"> 
     <select ng-init="data.selectedItem = data.selectedItem || item.subItems[0]" 
       class="form-control" 
       ng-model="data.selectedItem" 
       ng-change="selectedItemChanged()" 
       ng-options="subItem as subItem.name for subItem in item.subItems"> 
     </select> 
    </div> 
</div>

データは次のようになります：私はそれぞれに異なる（動的）モデルを割り当てる以下の方法を試みた

scope.items = [ 
    { 
     id: 1, 
     type: 'select', 
     subItems: [{ 
      ID: 1, 
      name: 'sub item 1' 
     }, { 
      ID: 2, 
      name: 'sub item 2' 
     }, { 
      ID: 3, 
      name: 'sub item 3' 
     }] 
    }, 
    { 
     id: 2, 
     type: 'select', 
     subItems: [{ 
      ID: 4, 
      name: 'sub item 4' 
     }, { 
      ID: 5, 
      name: 'sub item 5' 
     }, { 
      ID: 6, 
      name: 'sub item 6' 
     }] 
    }, 
    ];

基本的に、私はそれらを生成するための次のコードを有します選択：

<div ng-repeat="item in items"> 
    <div ng-if="item.type === 'select'"> 
     <div class="col-xs-4 col-sm-4 col-md-2"> 
      <select ng-init="data[data.selectedItem + item.id] = data[data.selectedItem + item.id] || data[item.subItems[0] + item.id]" 
        class="form-control" 
        ng-model="data[data.selectedItem + item.id]" 
        ng-change="selectedItemChanged(data[data.selectedItem + item.id])" 
        ng-options="subItem as subItem.name for subItem in item.subItems"> 
      </select> 
     </div> 
    </div> 
</div>

しかし、問題は、デフォルトの項目を初めてページを読み込むときに選択します。 uは、カスタムディレクティブを作成することを選択するとウルはbindToController構文を使用している場合scope:{} を用いて単離し、スコープとしてスコープを設定することができ、角度

にスコープ汚染され、それがどうなるか、ここで直面ウル

出典

2017-05-19 Apostrofix

2つの異なるモデルを使用する2番目の方法は正しいです。デフォルト値として

バインドitem.subItems[0].nameドロップダウンのためのselectedItemが存在しない場合。
ng-optionsでも、subItem.nameは、オブジェクト全体ではなく、subItemの値でなければなりません。

ng-options="subItem.name as subItem.name for subItem in item.subItems"

var app = angular.module("MyApp", []).controller("MyCtrl", function($scope) { 
 
    
 
    $scope.items = [ 
 
    { 
 
     id: 1, 
 
     type: 'select', 
 
     subItems: [{ 
 
      ID: 1, 
 
      name: 'sub item 1' 
 
     }, { 
 
      ID: 2, 
 
      name: 'sub item 2' 
 
     }, { 
 
      ID: 3, 
 
      name: 'sub item 3' 
 
     }] 
 
    }, 
 
    { 
 
     id: 2, 
 
     type: 'select', 
 
     subItems: [{ 
 
      ID: 4, 
 
      name: 'sub item 4' 
 
     }, { 
 
      ID: 5, 
 
      name: 'sub item 5' 
 
     }, { 
 
      ID: 6, 
 
      name: 'sub item 6' 
 
     }] 
 
    }, 
 
    ]; 
 
    
 
    $scope.data = {selectedItem1 : '', selectedItem2 : ''}; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="MyApp"> 
 
    <div ng-controller="MyCtrl"> 
 
    <div ng-repeat="item in items"> 
 
    <div ng-if="item.type === 'select'"> 
 
     <select ng-init="data['selectedItem' + item.id] = data['selectedItem' + item.id] || item.subItems[0].name" 
 
       class="form-control" 
 
       ng-model="data['selectedItem' + item.id]" 
 
       ng-change="selectedItemChanged()" 
 
       ng-options="subItem.name as subItem.name for subItem in item.subItems"> 
 
     </select> 
 
    </div> 
 
</div> 
 
    {{data | json}} 
 
    </div> 
 
</body>

出典

2017-05-19 12:31:15 Sajal

うまく働いたこと、ありがとうございます！ 'ng-options'に' subItem'オブジェクト全体を使用してしまったのは、そのモデルが単なる名前ではなくオブジェクト全体を持つからです。 – Apostrofix

.... changing the selected item is causing the selected items in the other select to be unselected

：

scope:{}, 
bindToController:{}

angular.directive（ 'selectBox'、selectBox）;

function selectBox(){ 
    return { 
    restrict: 'E', 
    scope: {}, 
    template: ` 
    //whatever ur html code + ng-model + other ng- directives goes here. 
     `, 
//notice its backticks, backticks allow multiline strings in es6 and 
//is supported in most browsers. 
    //anyother properties like replace/transclude+ng-transclude, etc. 
    } //return ends 
} //selectBox ends

HTMLで

：

<select-box></select-box> 
<select-box></select-box> 
<select-box></select-box>

およびuは何かを変更した場合、それらのそれぞれが、独自のスコープを持っているように、今、他の選択 - ドロップダウンには影響しません。

PS：非常に多くのng-directivesがur制御であり、すべてがダイジェストサイクルを開始し、urページが大きくなると処理が遅くなります。可能であれば、「デバウンス」。

出典

2017-05-19 12:10:40 Plankton

異なるモデルで選択要素を動的に生成する方法は？

答えて

関連する問題