0
Angular-xeditable tableを作成中で、建物の選択に基づいてルームオプションを利用できるようにする必要があります。AngularJS Angular-xeditableテーブルを使用した動的な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>
それは多分私だけが、何を問題です。結果に誤りがありますか？ – user3862271