AngularJS Динамические ng-опции с угловой таблицей

0

Я создаю таблицу с угловым разрешением и нуждаюсь в наличии вариантов комнаты на основе выбора здания.

Он работает так, но я должен сохранить, а затем снова щелкнуть, чтобы просмотреть доступные комнаты. Я хочу, чтобы комнаты из здания отображались или включались, когда это здание выбрано для этого события.

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>
  • 0
    Это может быть только у меня, но в чем проблема. Это ошибки в результатах?
Теги:

2 ответа

0

Я смог заставить его работать, добавив 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 не работает

Поделиться
0

Я вижу две очевидные проблемы:

Во-первых, вы не указали 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>

Безусловно, вы определили события, здания и комнаты как объект, а не как массив. Просто удалите фигурные скобки.

Поделиться
  • 0
    Мне не хватало кода в моем фрагменте. Я только что обновил его.
  • 0
    Я думаю, что ваш фактический e.building не изменится, пока вы не запустите saveTable (). Попробуйте проверить табличную форму или переменные e и найти фактическую переменную с выбранным значением.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню