Mixing in the Model

We now mix in the model from an earlier post to pull in a list of the wineries on the "Wineries" screen. The key additional concepts that are introduced are:

• ngRepeat: <https://docs.angularjs.org/api/ng/directive/ngRepeat>
  
  ngRepeat is used to loop through an array to dynamically create DOM elements. In this case, based on the array $scope.wineries it creates <li> elements.
• $timeout:
  
  $timeout is simply a reference to the standard JavaScript window.setTimeout <http://www.w3schools.com/js/js_timing.asp> function. In this example, we have to use it to alert Angular.js to update.

note: There is one bit of complicated JavaScript that converts the snapshot.val() into the $scope.wineries array.

Replace the respective sections of the JSFIDDLE example as described in <http://buildspa.blogspot.com/2015/01/mixing-in-view.html>.

HTML

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<!-- /views/wineries.html (obmit work-around script tag)--> <script type="text/ng-template" id="views/wineries.html">     <div class="panel panel-default">         <div class="panel-heading">              <h3 class="panel-title"><button ng-click="navigate('/');" class="btn btn-default"><span class="glyphicon glyphicon-chevron-left"></span> Back</button> Wineries</h3>         </div>         <ul class="list-group">             <li ng-repeat="winery in wineries" class="list-group-item">                {{winery.val.name}}             </li>         </ul>     </div> </script> <!-- EOF -->

JavaScript

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

controllers.controller('WineriesCntrl', ['$scope', '$location', '$window', '$timeout', function($scope, $location, $window, $timeout) {                           var myDataRef;     $scope.wineries;     $scope.navigate = function(path) {         $location.path(path);            };     myDataRef = new $window.Firebase('https://wineapp.firebaseio.com');     myDataRef.child('wineries').once('value', function(snapshot) {         $timeout(function() {             $scope.wineries = Object.keys(snapshot.val()).map(function(key) {                 return {key: key, val: snapshot.val()[key]};             });         });     }, function(error) {     }); }]);