Question

我正在创建一个Angular-xeditable table，并且需要根据建筑物选择提供房间选项。

它的工作方式与此类似，但我必须保存，然后再次单击以编辑以查看可用的房间。我希望建筑物的房间能够在展览中被选中时展示或启用。

＆＃13;

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"}
  ];
  

});

＆＃13;

<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>

＆＃13;

Answer 1

我可以看到两个明显的问题：

首先，你没有指定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>

Seconly，您将事件，建筑物和房间定义为对象，而不是数组。只需删除大括号。

Answer 2

我能够通过将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

具有Angular-xeditable表的AngularJS动态ng选项

2 个答案: