离子保持指令

Question

我有一个具有重复收集的div，在其上应用ng-class ng-class="$index%2 == '0' ? 'blue' : 'yellow'" ，我还将ionic保留指令用作ng-class="{'selected': column.selected}" ？我想在选中该行时应应用所选类的红色。问题是如果我先编写第二个ng类，则应用红色，但是第一个ng-class变得无效，有没有办法实现这两个目标

<div class="row brd rowclass" collection-repeat="column in tasklist_records track by $index" on-hold="onHoldFlag == true?'':onHold(column,$index)" ng-class="{'selected': column.selected}" ng-class="{white:$index%2 == 0,grey:$index%2 == 1,firstrow:$first}" item-height="50px" ng-click="goToAccountDetailScreen(column,$index)">

Answer 1

在ng-class您可以插入任何Angular表达式：为什么不使用分析所需条件的函数 （在范围内定义）并返回包含正确的类名的字符串（以空格分隔）？

这是一个例子：

 angular.module('ionicApp', ['ionic']) .controller('MyCtrl', function($scope) { console.log("MyCtrl"); $scope.tasklist_records = [{ id: 0, onHoldFlag: false }, { id: 1, onHoldFlag: false }, { id: 2, onHoldFlag: false, selected: true }, { id: 3, onHoldFlag: false }, { id: 4, onHoldFlag: false }, { id: 5, onHoldFlag: false }, { id: 6, onHoldFlag: false }]; $scope.customClass = function(column, $index) { if (!column) return; var _class = ""; if (column.id==0) _class += "firstrow "; if ($index % 2 == 0) _class += "grey "; if ($index % 2 == 1) _class += "white "; if (column.selected) _class += "selected "; console.log("customClass", column,_class); return _class; } $scope.onHold = function(column, $index) { console.log("onHold", column, $index); column.onHoldFlag = !column.onHoldFlag; } $scope.goToAccountDetailScreen = function(column, $index) { console.log("goToAccountDetailScreen", column, $index); } }); 

 .selected { color: red; } .white { background-color:white; } .grey { background-color:grey; } .firstrow { color: blue; } 

 <html ng-app="ionicApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Ionic List can swipe</title> <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> </head> <body ng-controller="MyCtrl"> <ion-header-bar class="bar-positive"> <h1 class="title">Ionic List</h1> </ion-header-bar> <ion-content> <ion-list> <div class="row brd rowclass" collection-repeat="column in tasklist_records track by $index" on-hold="onHoldFlag == true?'':onHold(column,$index)" ng-class="customClass(column, $index)" item-height="50px" ng-click="goToAccountDetailScreen(column,$index)">{{column.id}} - {{column.onHoldFlag}} - {{column.selected}} </div> </ion-list> </ion-content> </body> </html>