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

    <!-- /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

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) {
    });
}]);