AngularJS Dynamische ng-Optionen mit angular-xeditable Tabelle

Ich erstelle eine Angular-xeditable table und muss Raumoptionen basierend auf der Gebäudeauswahl verfügbar haben.AngularJS Dynamische ng-Optionen mit angular-xeditable Tabelle

Es funktioniert so, aber ich muss speichern und dann klicken, um erneut zu bearbeiten, um die verfügbaren Räume zu sehen. Ich möchte, dass die Räume des Gebäudes angezeigt oder aktiviert werden, wenn das Gebäude für dieses Ereignis ausgewählt wird.

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

 
app.run(function(editableOptions) { 
 
    editableOptions.theme = 'bs3'; // bootstrap3 theme 
 
}); 
 

 
app.controller('mainCtrl', function($scope, $filter, $http, $q) { 
 
    $scope.events = [ 
 
    {id:1, title:"First event", building:"", room:""}, 
 
    {id:2, title:"Second event", building:"", room:""}, 
 
    {id:3, title:"Third event", building:"", room:""},    
 
    {id:4, title:"Fourth event", building:"", room:""} 
 
    ]; 
 
    
 
    $scope.buildings = [ 
 
    {id:1, name:"99 Broadway"}, 
 
    {id:2, name:"25 Simpson"} 
 
    ]; 
 
    
 
    $scope.rooms = [ 
 
    {id:1, name:"101", buildingId:"1", buildingName:"99 Broadway"}, 
 
    {id:2, name:"102", buildingId:"1", buildingName:"99 Broadway"}, 
 
    {id:3, name:"113", buildingId:"2", buildingName:"25 Simpson"}, 
 
    {id:4, name:"114", buildingId:"2", buildingName:"25 Simpson"} 
 
    ]; 
 
    
 

 
});

<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-xeditable/0.1.12/js/xeditable.min.js"></script> 
 
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/angular-xeditable/0.1.12/css/xeditable.min.css" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
<div ng-app="myApp" ng-controller="mainCtrl" class="container"> 
 
    
 
    <form editable-form name="tableform" onaftersave="saveTable()" oncancel="cancel()"> 
 

 
     <h2 class="title">Events</h2> 
 

 
     <!-- buttons --> 
 
     <div class="btn-edit"> 
 
     <button type="button" class="btn btn-default" ng-show="!tableform.$visible" ng-click="tableform.$show()"> 
 
      edit 
 
     </button> 
 
     </div> 
 
     <div class="btn-form" ng-show="tableform.$visible"> 
 
     <button type="submit" ng-disabled="tableform.$waiting" class="btn btn-primary">save</button> 
 
     <button type="button" ng-disabled="tableform.$waiting" ng-click="tableform.$cancel()" class="btn btn-default">cancel</button> 
 
     </div> 
 

 

 
     <table class="table table-bordered table-hover table-condensed"> 
 
     <tr> 
 
      <td>Title</td> 
 
      <td>Building</td> 
 
      <td>Room</td> 
 
     </tr> 
 
     <tr ng-repeat="e in events"> 
 
      <td><span editable-text="e.title" e-form="tableform">{{ e.title }}</span></td> 
 

 
      <td> 
 
      <span editable-select="e.building" e-form="tableform" 
 
      e-ng-options="b.name as b.name for b in buildings"> 
 
       {{ e.building }} 
 
      </span> 
 
      </td> 
 

 
      <td> 
 
      <span editable-select="e.room" e-form="tableform" 
 
      e-ng-options="r.name as r.name disable when e.building != r.buildingName for r in rooms" 
 
      ng-disabled="!e.building"> 
 
       {{ e.room }} 
 
      </span> 
 
      </td> 
 
     </tr> 
 
     </table> 
 

 

 
    </form> 
 
    </div> 
 
</body> 
 
</html>

Quelle

2016-05-31 HarlemSquirrel

Es mich vielleicht auch nur, aber was ist das Problem. Sind es die Fehler in den Ergebnissen? – user3862271

I 2 offensichtliche Probleme sehen:

Erstens, nicht wahr ng-repeat angeben, so Variable e ist nicht überall definiert (plus Ihre td-Elemente sind nicht eingewickelt in tr tag). Ich glaube, Sie brauchen, etw wie folgt aus:

<tr ng-repeat="e in events"> 
<td> 
    <span editable-text="e.title" e-form="tableform">{{ e.title }} </span> 
</td> 
<td> 
    <span editable-select="e.building" e-form="tableform" onshow="loadBuildings()" e-ng-options="b.name as b.name for b in buildings">{{ e.building }}</span> 
</td> 
<td> 
    <span editable-select="e.room" e-form="tableform" onshow="loadRooms()" e-ng-options="r.name as r.name disable when e.building != r.buildingName for r in rooms" ng-disabled="!e.building">{{ e.room }}</span> 
</td> 
</tr>

Seconly, Sie definierte Ereignisse, Gebäude und Räume als Objekt, nicht als Array. Entfernen Sie einfach geschweifte Klammern.

Quelle

2016-05-31 15:29:21

Ich habe Code in meinem Schnipsel gefehlt. Ich habe es gerade aktualisiert. – HarlemSquirrel

Ich denke, dass Ihr tatsächliches e.building nicht geändert wird, bis Sie saveTable() ausführen. Versuchen Sie, Tabellenform oder e-Variablen zu untersuchen und eine tatsächliche Variable mit dem ausgewählten Wert zu finden. –

Das macht Sinn, weil ich nicht sicher bin, wie ich die Inspektion machen soll. Jede Hilfe wäre großartig! – HarlemSquirrel

konnte ich es durch wählen Hinzufügen e-ng-change="setRoomOptions($data,e)" das Gebäude arbeiten erhalten, das Zimmer zu e-ng-options="r.name as r.name for r in e.roomOptions" wählen zu aktualisieren, und fügen Sie die folgenden

$scope.setRoomOptions = function(building,e) { 
    e.roomOptions = $filter('filter')($scope.rooms, {buildingName: building}); 
}

Referenz: Angular Xeditable drop down e-ng-change is not working

Quelle

2016-05-31 17:01:26 HarlemSquirrel

AngularJS Dynamische ng-Optionen mit angular-xeditable Tabelle

Antwort

Verwandte Themen