Использование AngularJS и Firebase для создания основного детального вида

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 использует нг повторения и дает мне 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> 

Я предположил, что я хотел бы использовать нг кнопкой мыши и нг-шоу, но я попробовал и я думаю, что я пропускаю фундаментальный шаг где-то по пути ,

Я тоже искал этот шизнит, но не могу найти то, что мне нужно. Я нашел половину порядочного вам трубчатого видео (https://www.youtube.com/watch?v=Er8w4ROm8E4), но я все еще не могу заставить его работать.

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

Если кто-то может помочь, что было бы весьма полезно.

Полная рабочая демо до сих пор здесь http://goo.gl/rr4jgP

Answer 1

Одно замечание заключается в вызове повторить результат в результатах вместо reuslts в результатах

Это будет зависеть от того, как вы структурировали свои данные в Fireabse но обычно вы хотели бы иметь ngClick, который принимает результат в функцию, а затем делает что-то с такими данными, как заполняет его в модальном или что-то еще.

В качестве альтернативы, если данные структурированы таким образом, что каждый объект имеет под-объекты, например result.newRoom имеет атрибут result.newRoom.number, тогда вы можете иметь аккордеон, который отображает эту деталь при щелчке.

Посмотрите документацию для начальной загрузки аккордеонов:

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 wou л.д. быть:

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

The $ scope.selectedResult может быть связан с чем-то в шаблоне, который показывает детали результат