动画未应用于 Angular ng-repeat 列表中的所有项目

Question

Angular 问题的新手： 希望我的应用在每次更改时为 ng-repeat 列表中的所有项目设置动画。

查看了有关此主题的多个项目，包括：

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?

看来我有同样的 ng-repeat-needs-render-changed-list 问题。应用程序运行良好，但第一次单击后动画未应用于列表中的所有项目。

我试图在代码中定位$scope.$apply()，但一直给我抛出丑陋的错误。只是无法弄清楚如何/在哪里应用我认为应该是$scope.$apply()。

相关的 HTML 在这里

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

    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

{
    "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"    
  }

Answer 1

代码现在正在做我正在寻找的事情。

将整个对象而不是特定值推送到新数组中。

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

然后 ng-repeat thru 新集合和动画出现在所有项目上。

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