AngularJS帶角度可變表的動態ng選項表

我正在創建Angular-xeditable table，需要根據建築物選擇提供空間選項。AngularJS帶角度可變表的動態ng選項表

它的工作原理是這樣的，但我必須保存，然後再次單擊編輯以查看可用房間。我希望當建築物被選中時，建築物的房間顯示或啓用。

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>

來源

2016-05-31 HarlemSquirrel

這也許只是我，但什麼是問題。這是結果中的錯誤嗎？ – user3862271

我可以看到2個明顯的問題：

首先，你沒有指定NG-重複，所以變量e沒有定義任何地方（加上你的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" 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，你定義的事件，建築物和房間爲研究對象，而不是陣列。只刪除大括號。

來源

2016-05-31 15:29:21

我在代碼片段中缺少代碼。我剛剛更新了它。 – HarlemSquirrel

我認爲在運行saveTable（）之前，您的實際e.building不會更改。嘗試檢查tableform或e變量，並找到一個具有選定值的實際變量。 –

這是有道理的，我不知道如何做檢查。任何幫助都是極好的！ – HarlemSquirrel

我能夠得到它通過增加e-ng-change="setRoomOptions($data,e)"的建築選擇，更新的房間選擇e-ng-options="r.name as r.name for r in e.roomOptions"工作，並添加以下

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

參考：Angular Xeditable drop down e-ng-change is not working

來源

2016-05-31 17:01:26 HarlemSquirrel

AngularJS帶角度可變表的動態ng選項表

回答

相關問題