數組無法傳播查看

我對Angularjs和Firebase非常陌生，並且在這段時間內陷入了相當長的一段時間。我正在嘗試使用ng-repeat來遍歷我在控制器中設置的一組過程。我可以在我的控制器中打印$scope.procedures，但不能在index.html中打印。任何想法，我要去哪裏錯了？數組無法傳播查看

的index.html

<!DOCTYPE html> 
<html lang="en" ng-app="myApp"> 
    <head> 
    <meta charset="utf-8"> 
    <!-- Angular JS --> 
    <script src="lib/angular/angular.min.js"></script> 
    <!-- Firebase --> 
    <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script> 
    <script src="js/controllers.js"></script> 
    <link rel="stylesheet" href="css/style.css"> 
    </head> 
    <body> 
    <div class="container-fluid" id="logo"> 
    </div> 
    <div class="container" ng-controller="MainCtrl"> 
     <div class="col-sm-7 col-md-6 col-md-offset-1" id="message"> 
     <label id="input-label">Insurance Company</label> 
     <input ng-model="insurQuery" class="form-control insurInput" id="input-box" placeholder="Patient Insurance Company" autofocus> 
     <div ng-if="showProcedures()"> 
      <h3>Procedures Covered by <span id="proc-span">{{selectedInsur.name}}</span></h3> 
      <ul class="list-group"> 
      <li class="list-group-item" ng-repeat="proc in procedures"> 
      <a>{{ proc.name }}</a> 
      </li> 
      </ul> 
     </div> 
     </div> 
     <div class="col-sm-4 col-md-4 col-md-offset-1" id="message2"> 
     <ul class="list-group"> 
      <li class="list-group-item ng-class: {'active':isSelectedInsur(company)}" ng-repeat="company in insuranceCompanies | filter: insurQuery | orderBy: 'name'"> 
      <a href="#" ng-click="setSelectedInsur(company)">{{ company.name }}</a> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </body> 
</html>

controllers.js

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

myApp.controller("MainCtrl", function($scope, $firebaseArray) { 
    var ref = new Firebase("https://payoralerts.firebaseio.com/companies"); 
    // download the data into a local object 
    $scope.insuranceCompanies = $firebaseArray(ref); 

    $scope.selectedInsur = null; 
    $scope.isSelected = false; 
    $scope.procedures = []; 

    function getProcedures() { 
    var companiesBaseUrl = "https://payoralerts.firebaseio.com/companies/" 
    var proceduresBaseRef = new Firebase("https://payoralerts.firebaseio.com/procedures/"); 
    var companyUrl = companiesBaseUrl + $scope.selectedInsur.$id + "/procedures/"; 
    var proceduresUrl = "https://payoralerts.firebaseio.com/procedures/" 
    var companyProceduresRef = new Firebase(companyUrl); 

    companyProceduresRef.on("child_added", function(snap) { 
     proceduresBaseRef.child(snap.key()).once("value", function(data) { 
      if (data.val()) { 
       console.log("Name: ", data.val().name); 
       $scope.procedures.push(data.val()); 
       console.log("scope procedures: ", $scope.procedures); 
      }; 
     }); 
    }); 
    } 

    function setSelectedInsur(company) { 
    if ($scope.selectedInsur == company) { 
     $scope.selectedInsur = null; 
     $scope.isSelected = null; 
    } else { 
     $scope.selectedInsur = company; 
     $scope.isSelected = true; 
     getProcedures(); 
     console.log("scope procedures: ", $scope.procedures); 
    } 
    } 

    function isSelectedInsur(company) { 
    return $scope.selectedInsur !== null && company.name == $scope.selectedInsur.name; 
    } 

    function showProcedures() { 
    if ($scope.isSelected == true) { 
     return true; 
    } else { 
     return false; 
    } 
    } 

    $scope.setSelectedInsur = setSelectedInsur; 
    $scope.isSelectedInsur = isSelectedInsur; 
    $scope.showProcedures = showProcedures; 
    // $scope.procedures = $scope.procedures; 

});

來源

2016-06-14 steph

你確定'showProcedures（）'返回true？ – adolfosrs

是的，它是真的。 showProcedures（）'後面的標題然後在'ng-repeat'列表中沒有任何顯示@adolfosrs – steph

如果在數組推送後立即調用'$ scope。$ apply（）'，會發生什麼？ – adolfosrs

我也很新的角度，以及在角的最深處，硬課題之一（ imo）是角度綁定如何在引擎蓋下工作。

在你的情況下調用$scope.$apply()的作品，但請記住，這不是最好的解決方案，你不應該開始調用它，只要你有一個綁定的問題。

我真的鼓勵你花一些時間閱讀一些關於角度綁定的文章。您可以開始here和here。之後回到您的代碼，以瞭解您做錯了什麼。 :)

來源

2016-06-14 22:13:05 adolfosrs

非常感謝 - 我一定會閱讀這些文章。非常感激！ – steph

數組無法傳播查看

回答

相關問題