0

Newbie to Angular Question: Would like my app to animate all items in an ng-repeat list each time it changes.

Looked over multiple items on this topic including:

AngularJS ng-repeat rerender

http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

Angular.js: Is it possible to re-render ng-repeats based on existing scope data?

Appears I have the same ng-repeat-needs-render-changed-list issue. App works great except animation not being applied to all items in list after the first click.

I have attempted to position $scope.$apply() in code but keeps throwing me ugly errors. Just cannot figure out how/where to apply what I think should be a $scope.$apply().

Relevant HTML here 

<!-- Toolbar -->
<md-toolbar class="md-primary">
    <div class="md-toolbar-tools">
        <span class="product-label"><h1>Car List</h1></span>
    </div>
</md-toolbar>

<md-content class="md-padding">
    <!--Navigation Bar-->
    <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">

        <md-nav-item md-nav-click="goto('page1')" name="Domestic" ng-click="getType(currentNavItem)">Domestic</md-nav-item>
        <md-nav-item md-nav-click="goto('page2')" name="Foreign" ng-click="getType(currentNavItem)">Foreign</md-nav-item>

    </md-nav-bar>

    <!--run div if nav item has been clicked-->
    <div ng-show = "currentNavItem">

        <!--flip thru array via ng-repeat and apply animation-->
        <div layout="row" layout-wrap>
            <div flex="50" class="repeat-animation" ng-repeat="x in carhold2|orderBy track by $index">
                <div class="itemcard">
                     {{x}}
                </div>
            </div>
        </div>
    </div>
</md-content>

Javascript here 

    var app = angular.module('carDash',['ngMaterial', 'ngMessages', 'material.svgAssetsCache', 'ngAnimate'])
            .config(configFn);

    function configFn($mdThemingProvider) {
        $mdThemingProvider.theme('default')
                .primaryPalette('blue')
                .accentPalette('red');
    }

    app.controller('AppCtrl', ['$scope', "$http", "$log",
        function ($scope, $http, $log) {

        //obtain entire json
        var g = $http({
            url : "car-list.json",
            method: 'get'
        });

        g.success(function (data)   {
            //populate array based on domestic or foreign selection
            $scope.cars = data;

            $scope.getType = function (currentNavItem) {
                $scope.typo = currentNavItem;
                var carhold = [];
                for (var i = 0; i < $scope.cars.length; i++) {
                    if ($scope.cars[i].type == $scope.typo) {
                        carhold.push($scope.cars[i].done)
                    };
                };
                $scope.carhold2 = carhold;
                };
        });

        g.error(function (err){
            $log.error(err);
        });
    }]);

JSON here

{
    "id": 1,
    "type": "Domestic",
    "done": "Ford"
  },

  {
    "id": 2,
    "type": "Domestic",
    "done": "Chrysler"
  },

  {
    "id": 3,
    "type": "Domestic",
    "done": "Tesla"
  },

  {
    "id": 4,
    "type": "Foreign",
    "done": "Mercedes Benz"
  },

  {
    "id": 5,
    "type": "Foreign",
    "done": "BMW"
  },

  {
    "id": 6,
    "type": "Foreign",
    "done": "Volvo"
  },

  {
    "id": 7,
    "type": "Foreign",
    "done": "VW"    
  }
Community
  • 1
  • 1
metzcy99
  • 1
  • 1

1 Answers1

0

Code now doing what I was looking for.

Pushed entire object rather than specific value into new array.

$scope.getType = function (currentNavItem) {
                $scope.typo = currentNavItem;
                var carhold = [];
                for (var i = 0; i < $scope.cars.length; i++) {
                    if ($scope.cars[i].type == $scope.typo) {
                        carhold.push($scope.cars[i]);
                    };
                };

Then did ng-repeat thru new collection and animation appeared on all items.

 <!--flip thru array via ng-repeat and apply animation-->
        <div layout="row" layout-wrap>
            <div flex="50" class="repeat-animation" ng-repeat="x in carhold2">
                <div class="itemcard">
                     {{x.done}}
                </div>
            </div>
        </div>
metzcy99
  • 1
  • 1