Question

我是离子角度世界的新手。我正在尝试为我的项目添加动画类，但是基于表达式，类正在改变。即奇数项目想要向左动画，甚至动画到右边。

  <ion-item class="{{'list_item slideInLeft'}}"

无效，但

  <ion-item class="list_item slideInLeft"

动画作品

我需要上课＆＃39;＆＃39;工作，以便能够表达：

class="{{i%2==0 ? 'list_item slideInLeft':'list_item slide-in-both-ways'}}"

我也尝试过：

ng-class-odd="'list_item slideInLeft'" ng-class-even="'list_item slideInLeft'"

和

ng-class ="{ odd: 'list_item slideInLeft', even:'list_item slideInLeft'}"

没有运气。

任何人都有一个想法，赞赏！

离子信息（如果需要）

global packages:

@ionic/cli-utils : 1.4.0
Ionic CLI        : 3.4.0

local packages:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-ionic-angular : 1.3.1
Ionic Framework                 : ionic-angular 3.3.0

System:

Node       : v6.10.0
OS         : Windows 10
Xcode      : not installed
ios-deploy : not installed
ios-sim    : not installed
npm        : 3.10.10

Answer 1

你可以使用如下所示的ng类....我只是使用我的颜色类，所以你必须用你的字段和值替换

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
   $scope.name=[];
  for(var i=0;i<10;i++){
    $scope.name.push(i);
  }
});

/* Put your css in here */

.red{
  color:red;
}
.blue{
  color:blue;
}

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p ng-repeat="i in name track by $index" ng-class={red:$index%2==0,blue:$index%2!==0}>{{i}}</p>
  </body>

</html>

ng表达式中的动画类不适用于离子3

1 个答案: