Verwenden einer ng-Option Dropdown in einem UI-Grid editableCellTemplate [ng-Grid 3.x]

Question

Ich verwende ng-Grid's neues 3.0 Release ui-grid, um ein Raster in meiner Anwendung zu machen. Was ich versuche zu tun, ist eine der editierbaren Zellen in meiner Tabelle eine ng-options Drop-Down, die mit Daten gefüllt mit einer eckigen Fabrik gefüllt ist.

Ich versuche dies zu tun, indem Sie die editableCellTemplate Funktion des UI-Grid verwenden. Hier

ist einige Beispiel-Code:

HTML:

<div ui-grid="gridOptions" ui-grid-edit class="grid"></div> 

Controller:

$scope.gridOptions = { 
    enableSorting: true, 
    enableFiltering: true, 
    enableCellEditOnFocus: true, 
    columnDefs: [ 
     { field: 'name', 
     sort: { 
      direction: 'desc', 
      priority: 1 
     } 
     }, 
     { field: 'gender', editType: 'dropdown', enableCellEdit: true, 
      editableCellTemplate: 'temp.html' }, 
     { field: 'company', enableSorting: false } 
]}; 

temp.html:

<div> 
    <select ng-model="row.entity.gender" data-ng-options="d as d.type for d in genderType"> 
     <option value="" selected disabled>Choose Gender</option> 
    </select> 
</div> 

Hier ist ein plunker mit dem Code . [Hinweis: Dies ist nur Beispielcode. Array für ng-Optionen wird aus eckiger Fabrik in aktuellem Code eingezogen und nicht im Umfang deklariert. editDropdownOptionsArray wird wahrscheinlich nicht funktionieren, weil Daten dynamisch sind.]

Ist es möglich, dies mit UI-Grid zu tun? Ich dachte, es wäre vielleicht ein Problem des Umfangs, denn wenn ich den ng-Optionscode in meine HTML-Seite schreiben würde, funktionierte das wie erwartet, aber was ich aus der ui-grid-Dokumentation entnehme, ist, dass die temp.html-Datei im Bereich sein sollte . Ich weiß, dass dieses Zeug immer noch in instabiler Version ist, aber jede Hilfe in dieser Angelegenheit wäre willkommen!

---

UPDATE 2015.03.31:

Hallo Jungs, nur eine Note, wenn Ihr diese Lösung auszuprobieren und es funktioniert nicht. Im Januar wurde der Code für externe Bereiche von getExternalScopes() auf grid.addScope.source umgestaltet. https://github.com/angular-ui/ng-grid/issues/1379

Hier ist die aktualisierte plunkr mit dem neuen Code: Click Me!

Answer 1

Sie müssten die externe Bereiche Funktion innerhalb der 3.x-Version von UI-Grid verwenden. Der Grund, warum Sie keine Optionen in der Dropdown-Liste auswählen können, liegt darin, dass ui-grid jetzt einen isolierten Bereich verwendet und Sie nicht direkt auf die Anwendungsbereichsvariablen zugreifen können, wenn Sie sich in einer Zelle befinden.

konnte ich Ihre plunkr bekommen unten mit den Schritten arbeiten - updated plunkr

Schritte sehen:

1) Innerhalb index.html, geben Sie die Außenumfänge Attribut im Netz div dh ändern

<div ui-grid="gridOptions" ui-grid-edit class="grid"></div> 

zu

<div ui-grid="gridOptions" ui-grid-edit class="grid" external-scopes="myExternalScope"></div> 

2) Innerhalb app.js, weisen Sie den Rahmen für unsere externen Bereich Eigenschaftenaccessoren dh fügen Sie diese Zeile:

$scope.myExternalScope = $scope; 

3) Innerhalb temp.html, greifen Sie auf die genderTypes Array getExternalScopes() dh modifizieren editableCellTemplate Wert von

<select ng-model="row.entity.Gender" data-ng-options="d as d.type for d in genderType"> 

zu

<select ng-model="row.entity.Gender" data-ng-options="d as d.type for d in getExternalScopes().genderTypes"> 

Extra-Gedanken:

1) konnte nicht gefunden werden, die ui-grid/dropdownEditor geeignet für meine Bedürfnisse - damit hat dies noch nicht ausprobieren .

2) Sie können Celltemplate auch zusammen mit editableCellTemplate hinzuzufügen. Sie können beide den gleichen Wert zuweisen.

Referenzen:

1. http://ui-grid.info/docs/#/tutorial/305_externalScopes

Answer 2

nicht sicher, ob diese Ihnen helfen können, weil ich auch mit den neuen ng-Raster zu spielen, um nur fange.

Es scheint, als hätten sich viele Optionen geändert. Nach dem, was ich gelernt habe, kann ich Ihnen sagen, dass es keine Notwendigkeit mehr für ein cellTemplate gibt, wenn Sie ein Dropdown haben möchten. Es ist bereits eingebaut

es wie folgt aktivieren.

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

    $scope.genderTypes = [{ 
     ID: 1, 
     type: 'female' 
    }, { 
     ID: 2, 
     type: 'female' 
    }, { 
     ID: 3, 
     type: 'both' 
    }, { 
     ID: 4, 
     type: 'none' 
    }, ]; 


    $scope.gridOptions = { 
     enableSorting: true, 
     enableFiltering: true, 
     enableCellEditOnFocus: true, 
     columnDefs: [{ 
     field: 'name', 
     sort: { 
      direction: 'desc', 
      priority: 1 
     } 
     }, { 
     field: 'gender', 
     editType: 'dropdown', 
     enableCellEdit: true, 
     editableCellTemplate: 'ui-grid/dropdownEditor', 
     editDropdownOptionsArray: $scope.genderTypes, 
     editDropdownIdLabel: 'type', 
     editDropdownValueLabel: 'type' 
     }, { 
     field: 'company', 
     enableSorting: false 
     }], 
     onRegisterApi: function(gridApi) { 
     grid = gridApi.grid; 
     } 
    }; 

    $http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json') 
     .success(function(data) { 
     $scope.gridOptions.data = data; 
     }); 

    } 
]); 

Ich bin nicht sicher, ruhig, wenn ich diesen Ansatz mag, aber die Zeit und die Nutzung wird es zeigen ...

Oh, und ich habe nicht herausgefunden, wie man Änderungen erkennt. Ich suche immer noch nach der (lausigen) Dokumentation für ein Event oder wenn ich Grid-Daten auf Änderungen beobachten muss.

Sagen Sie mir, wenn Sie etwas dazu gefunden haben.

haben Bisher Spaß mit diesem Plunker

Update:

ich herausgefunden habe, wie auf eine Änderung zu reagieren. Hinzufügen/Ändern dieser Zeilen:

onRegisterApi: function(gridApi) { 
    grid = gridApi.grid; 
    gridApi.edit.on.afterCellEdit($scope, function(rowEntity, colDef) { 
     alert(rowEntity.name + ' ' + rowEntity.gender); 
    }); 
    } 

Wenn Sie den Bearbeitungsmodus verlassen, wird eine Warnmeldung angezeigt. Beispiel: Klicken Sie außerhalb der Zelle.

Hoffe, das hilft.

Answer 3

Sie können editDropdownOptionsArray tatsächlich nutzen. Es ist durchaus möglich, es nach der Initialisierung zu bearbeiten!

$scope.someFunction = function(){ 
    $scope.coulmnDefs.columnDefs[1].editDropdownOptionsArray = [ 
    { 
     title: 'Some changed option', 
     value: 'opt1' 
    }, 
    { 
     title: 'Some other changed option', 
     value: 'opt2' 
    } 
    ] 
}