離子保持指令

我有一個收集重複的div，我應用了ng-class ng-class="$index%2 == '0' ? 'blue' : 'yellow'"，我也申請了離子持有指令ng-class="{'selected': column.selected}"？我希望當選擇該行時，所選類的紅色應該得到applied.The問題是，如果我先寫到第二NG類，應用紅色，但第一納克級成爲invalid.Is有沒有辦法兼顧的這個離子保持指令

<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)">

來源

2016-01-14 Ali Sadiq

在ng-class可以插入任何角度表達：爲什麼不使用函數（在範圍上定義）來分析所需條件並返回包含正確類名的字符串（空格分隔）？

下面是一個例子：

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>

來源

2016-01-14 13:22:42 beaver

離子保持指令

回答

相關問題