0
Newbie to Angular質問： 変更するたびにng-repeatリスト内のすべてのアイテムをアニメーション化しますか？私は同じNG・リピート・ニーズ・レンダリング・変更・リストの問題を持っているAngular ng-repeatリストのすべてのアイテムにアニメーションが適用されていません
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?
表示されます：
は含めてこのトピックに関する複数の項目を見渡しました。最初のクリック後にリスト内のすべてのアイテムにアニメーションが適用されていないことを除けば、アプリは素晴らしいです。
私は$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"
}