Javascript AngularFirebase（AngularFire）积垢显示和编辑页面？

为了学习AngularFire，我正在尝试构建一个简单的CRUD应用程序。索引和新页面进展顺利，但我仍停留在显示和编辑页面上。我无法在显示页面上显示选定的记录

使用MongoDB和Angular，很容易创建显示页面。在“索引”页面上，您添加了一个锚链接，其中包含要显示的记录的ID：

<a ng-href="#/{{record._id}}"><span>{{record.title}}</span<</a>

这将成功地将ID放入URL

问题是显示页面上没有显示任何记录。Angular似乎忘记了

{{record}}

所指的内容

我试着输入一个前导的

/

：

<a ng-href="/#/{{record._id}}"><span>{{record.title}}</span<</a>

这将返回ID。当我在console.log中记录$firebaseArray（ref）对象时，我会看到所有记录的集合（数组）。但是当我使用

collection.$getRecord（key）

或

collection.$keyAt（0）

或

collection.$indexFor（key）

时，我得到null或-1，表示AngularFire找不到记录

以下是我的完整控制器代码：

app.controller('ShowController', ['$scope', '$firebaseArray', '$location',
function($scope, $firebaseArray, $location) {

var ref = new Firebase("https://my-firebase.firebaseio.com/");
list = $firebaseArray(ref);
console.log(list); // []
console.log(location.hash.split('#/')[1]); // -K9hr32rhror_
var key = location.hash.split('#/')[1];
console.log(list.$getRecord(key)); // null
console.log(list.$keyAt(0)); // null
console.log(list.$indexFor(key)); // -1

接下来，我尝试使用

ng repeat=“集合中的记录| filter:key”>

，但我不知道应该是什么

key

---

我还用谷歌搜索了“AngularFirebase积垢显示页面”，但没有一个示例积垢应用程序有显示页面。我是不是误解了一些基本的东西？例如，我是否应该在索引页上使用

和

构建显示和编辑视图，而不必费心创建单独的显示和编辑页面？

您正在处理的问题是异步数据流。

app.controller('ShowController', ['$scope', '$firebaseArray', '$location',
function($scope, $firebaseArray, $location) {
  var ref = new Firebase("https://my-firebase.firebaseio.com/");
  var key = location.hash.split('#/')[1];
  $scope.list = $firebaseArray(ref); // data is downloading
  console.log($scope.list.length); // will be undefined, data is downloading
  $scope.list.$loaded().then(function(list) {
    console.log(list); // data has been downloaded!
    list.$getRecord(key); // data is available
  });
});

但是，

$loaded（）

通常是不必要的，因为AngularFire知道何时触发

$digest

。在您的情况下，您希望使用

$firebaseObject

app.controller('ShowController', ['$scope', '$firebaseObject', '$location',
function($scope, $firebaseObject, $location) {
  var ref = new Firebase("https://my-firebase.firebaseio.com/");
  var key = location.hash.split('#/')[1];
  var itemRef = ref.child(key);
  $scope.item = $firebaseObject(itemRef); 
});

---

这将根据

键获取单个项目，而不是下载整个列表并提取一个项目。
谢谢，David East，问题是异步数据。这里有两个工作控制器。第一个控制器获取数据数组并从数组中选择我想要的记录：

app.controller('ShowController', ['$scope', '$firebaseArray', '$location',
function($scope, $firebaseArray, $location) {
  // set up Firebase
  var ref = new Firebase("https://my-firebase.firebaseio.com/"); // goes to Firebase URL (fbURL)
  var list = $firebaseArray(ref); // puts
  list.$loaded().then(function(x) { // promise that executes when asynchronous data has loaded
    var key = location.hash.split('#/')[1]; // parses key from URL query string
    var showItem = list.$getRecord(key); // gets the record using the key passed in from the URL query string
    var showItems = []; // make an array
    showItems.push(showItem); // push the record into the array
    $scope.showItems = showItems; // attach the array to $scope
    // now 'ng-repeat="showIdea in showIdeas"' will iterate through the array, which has only one element
    // i.e., this is how you make Angular display one thing
  })
  .catch(function(error) { // if the data doesn't load
    console.log("Error:", error);
  });
}]);

第二个控制器使用David East的建议，即使用
$firebaseObject
只下载我想要的记录。我添加了一些代码，以便使用
ng repeat
显示它。是否有另一种方法显示带有角度的单个记录

app.controller('ShowController', ['$scope', '$firebaseObject', '$location',
function($scope, $firebaseObject, $location) {
  // set up Firebase
  var ref = new Firebase("https://my-firebase.firebaseio.com/"); // goes to Firebase URL (fbURL)
  var key = location.hash.split('#/')[1]; // parses key from URL query string
  var itemRef = ref.child(key); // sets up the query
  var showItems = []; // make an array
  showItems.push($firebaseObject(itemRef)); // makes the query and push the record into the array
  $scope.showItems = showItems; // attach the array to $scope
}]);

以下是观点：

<table ng-repeat="showItem in showItems">
  <tr><td>Name:</td><td>{{showItem.itemName}}</td></tr>
  <tr><td>Title:</td><td>{{showItem.itemTitle}}</td></tr>
</table>


名称：{{showItem.itemName}}
标题：{{showItem.itemTitle}
很高兴看到我的答案有帮助。如果没有其他考虑因素，您可以将其标记为已接受。保持未应答队列的整洁很好。绿色复选标记被接受了吗？我试过向上投票，但它说我没有足够的分数向上投票。你可以在15点向上投票。您刚刚超过：）要显示带角度的单个记录，我应该使用ng repeat还是有其他针对单个记录的指令？
app.controller('ShowController', ['$scope', '$firebaseObject', '$location',
function($scope, $firebaseObject, $location) {
  // set up Firebase
  var ref = new Firebase("https://my-firebase.firebaseio.com/"); // goes to Firebase URL (fbURL)
  var key = location.hash.split('#/')[1]; // parses key from URL query string
  var itemRef = ref.child(key); // sets up the query
  var showItems = []; // make an array
  showItems.push($firebaseObject(itemRef)); // makes the query and push the record into the array
  $scope.showItems = showItems; // attach the array to $scope
}]);

<table ng-repeat="showItem in showItems">
  <tr><td>Name:</td><td>{{showItem.itemName}}</td></tr>
  <tr><td>Title:</td><td>{{showItem.itemTitle}}</td></tr>
</table>