Я создаю таблицу с угловым разрешением и нуждаюсь в наличии вариантов комнаты на основе выбора здания.
Он работает так, но я должен сохранить, а затем снова щелкнуть, чтобы просмотреть доступные комнаты. Я хочу, чтобы комнаты из здания отображались или включались, когда это здание выбрано для этого события.
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>
Я смог заставить его работать, добавив 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});
}
Ссылка: отклонение e-ng-изменения Angular Xeditable не работает
Я вижу две очевидные проблемы:
Во-первых, вы не указали ng-repeat, поэтому переменная 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>
Безусловно, вы определили события, здания и комнаты как объект, а не как массив. Просто удалите фигурные скобки.