使用AngularJS和Firebase创建主细节视图

我使用AngularJS/bootstrap创建了一个站点。它给出了使用firebase数组的项目列表

我希望能够点击返回的结果，并有一些细节显示

目前我只使用一个控制器。如果可能的话，我想保持这种方式，因为我对这个完全陌生

Controller.js代码

var myApp = angular.module('myApp', ['firebase']);

myApp.controller('ResultsCtrl', ['$scope', '$firebaseArray', function($scope,$firebaseArray) {

var myResults = new Firebase('https://my-firebaseURL.firebaseio.com/results').orderByChild('NewRoomName');

$scope.results = $firebaseArray(myResults);


}]);

My Index.html使用ng repeat，仅从数组中提供3项。我想单击包含该项目的行，并显示剩余的详细信息

相关Index.html代码

    <div class="panel panel-body">
    <table class="table">
        <thead>
        <tr>
            <td>Room</td>
            <td>Old Name</td>
            <td>Location</td>


        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="results in results">
            <td>{{ results.NewRoomName}}</td>
            <td>{{ results.OldRoomName }}</td>
            <td>{{ results.Floor }}</td>


        </tr>
        </tbody>
    </table>

房间
老名字
位置
{{results.NewRoomName}
{{results.OldRoomName}
{{results.Floor}

我假设我会使用ng click和ng show，但我已经尝试过了，我认为我在这一过程中遗漏了一个基本步骤

我也用谷歌搜索出了这件事，但找不到我需要的东西。我找到了一个半像样的YouTube视频（），但我似乎仍然无法让它工作

我见过有人提到“工厂”。我真的希望在这个特别的宠物项目上避免这种情况，但如果它不能得到帮助，我想我将不得不接受它

如果有人能帮忙，我将不胜感激

到目前为止，完整的工作演示在这里

一个注意事项是在结果中调用repeatresult，而不是在结果中调用reuselts

这将取决于您在Fireabse中的数据结构，但通常您希望有一个ngClick，将结果带入函数，然后对该数据执行一些操作，如在模式或其他方式中填充数据

或者，如果数据的结构方式是每个对象都有子对象，例如result.newRoom有一个属性result.newRoom.number，则您可以拥有一个手风琴，在单击时显示该细节

查看引导手风琴的文档：

在手风琴内容中，您可以有如下内容：

<div class="panel-body">
  {{result.newRoomName.number}}
</div>

---

$scope.selectedResult可以绑定到显示详细结果的模板中的某个内容

谢谢，我会尝试的。数据是结构化的，因此每个房间都有属性fwiw so room ID、Floor、Name等。非常简单的JSON结构。JS将走向何方，是现有控制器的一部分还是新控制器的一部分？嗨，我只是想说我使用了你的解决方案，它工作得非常完美。抱歉耽搁了

<tr ng-repeat="result in results" ng-click="displayDetails(result)">
  <td>{{ results.NewRoomName}}</td>
  <td>{{ results.OldRoomName }}</td>
  <td>{{ results.Floor }}</td>
</tr>

$scope.displayResults = function(result){
  //Display Results
  $scope.selectedResult = result
}