Wie man ausgewählte Elemente mit verschiedenen Modellen dynamisch erzeugt?

Ich habe eine ng-repeat wo ich neue select Elemente auf einer Seite generieren. Es funktioniert gut, sie sind zusammen mit allen Optionen erstellt. Das Problem ist, dass sie am Ende die gleiche ng-model haben und somit, wenn es mehr als eine select auf der Seite gibt, nur die erste den voreingestellten Wert erhält und das Ändern des ausgewählten Elements bewirkt, dass die ausgewählten Elemente in der anderen Auswahl deaktiviert werden .Wie man ausgewählte Elemente mit verschiedenen Modellen dynamisch erzeugt?

Grundsätzlich habe ich den folgenden Code davon für die Erzeugung:

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

Die Daten wie folgt aussieht:

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

I versucht haben die folgende Art und Weise unterschiedliche (dynamisch) Modellen zu jedem von Zuweisen wählen:

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

Aber jetzt das Problem ist, dass es nicht das Standardelement nicht gesetzt in die Auswahl, wenn die Seite zum ersten Mal geladen wird.

Quelle

2017-05-19 Apostrofix

Ihr zweiter Ansatz, zwei verschiedene Modelle zu verwenden, ist korrekt.

Bind den item.subItems[0].name als Standardwert, wenn selectedItem für den Drop-Down nicht existiert.
Auch in ng-options, subItem.name sollte der Wert sein, anstatt subItem das ist das gesamte Objekt.

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>

Quelle

2017-05-19 12:31:15 Sajal

Vielen Dank, dass gut funktioniert! Ich habe am Ende nur das gesamte "subItem" -Objekt in "ng-options" verwendet, weil auf diese Weise das Modell das ganze Objekt und nicht nur den Namen hat. – Apostrofix

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

ur Was hier mit Blick ist die Verschmutzung Umfang in Winkel

u können wählen, eine benutzerdefinierte Richtlinie machen und den Umfang als isolierter-scope gesetzt scope:{} mit Wenn ur einer bindToController Syntax, dann wird es :

scope:{}, 
bindToController:{}

eckig.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

in HTML:

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

und jetzt, wenn u etwas ändern, die anderen select-Dropdown-Listen werden nicht betroffen sein, da jede von ihnen ihren eigenen Anwendungsbereich hat.

PS: so viele ng-Direktiven in unserer Kontrolle, alle von ihnen werden den Digest-Zyklus treten und wie ur-Seite wächst, wird es langsamer. "Entprellen", wo immer es möglich ist.

Quelle

2017-05-19 12:10:40 Plankton

Wie man ausgewählte Elemente mit verschiedenen Modellen dynamisch erzeugt?

Antwort

Verwandte Themen