Ionic on Hold 指令
Ionic on Hold directive
我有一个带有收集重复的 div,我在上面应用了 ng-class ng-class="$index%2 == '0' ? 'blue' : 'yellow'"
,我还应用了一个离子暂停指令作为 ng-class="{'selected': column.selected}"
?我想要选择行时,选择class的红色应该得到applied.The问题是如果我编写第二个ng class,那么第一个ng颜色,但第一个ng- [= = = 17=] 变成 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)">
在 ng-class
中,您可以插入任何 Angular 表达式:为什么不使用 函数 (在作用域上定义)来分析您想要的条件并返回包含正确 class 名称的字符串(space 分隔)?
这是一个例子:
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>
我有一个带有收集重复的 div,我在上面应用了 ng-class ng-class="$index%2 == '0' ? 'blue' : 'yellow'"
,我还应用了一个离子暂停指令作为 ng-class="{'selected': column.selected}"
?我想要选择行时,选择class的红色应该得到applied.The问题是如果我编写第二个ng class,那么第一个ng颜色,但第一个ng- [= = = 17=] 变成 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)">
在 ng-class
中,您可以插入任何 Angular 表达式:为什么不使用 函数 (在作用域上定义)来分析您想要的条件并返回包含正确 class 名称的字符串(space 分隔)?
这是一个例子:
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>