angularjs - Array Not Propagating to View -
i'm new angularjs , firebase , have been stuck on quite time. i'm trying use ng-repeat iterate on array of procedures set in controller. can print $scope.procedures in controller not in index.html. idea i'm going wrong?
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 <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 data 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; });
i'm pretty new angular , 1 of deep , hard topics in angular (imo) how angular binding works under hood.
in case calling $scope.$apply() works keep in mind not best solution , should not start calling whenever have binding problem.
i encourage take time reading articles angular binding is. can start here , here. after code understand doing wrong. :)
Comments
Post a Comment