Question

我使用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);


}]);

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

我认为我会使用ng-click和ng-show，但我已经尝试了，我想我在这个过程中的某个地方错过了一个基本步骤。

我还搜索了shiznit，但不能找到我需要的东西。我找到了一个不错的管视频（https://www.youtube.com/watch?v=Er8w4ROm8E4），但我仍然无法让它发挥作用。

我见过提及的工厂＆＃39;。我真的希望在这个特殊的宠物项目上避免这种情况，但是如果它无法得到帮助那么我就不得不把它搞砸了。

如果有人可以提供帮助，那将非常感激。

到目前为止，正在进行的完整工作演示http://goo.gl/rr4jgP

Answer 1

一个注意事项是在结果中调用重复结果，而不是在结果中重新显示

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

或者，如果数据的结构使得每个对象都有子对象，例如result.newRoom有一个属性result.newRoom.number，那么您可以使用手风琴在点击时显示该细节。

查看bootstrap手风琴的文档：

http://getbootstrap.com/javascript/#collapse-example-accordion

在手风琴内容中你可以有类似的东西：

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

如果您想使用ngClick，它将如下所示：

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

然后你的js将是：

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

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

使用AngularJS和Firebase创建主详细信息视图

1 个答案: