I am using Angular directives for KendoUI in my current application. I have a case when i need to use ng-class based some field value. i have tried below code but its not working
$scope.getClass = function (b) {
console.log(b);
}
$scope.columns = [
{ "field": "Name", "title": "Name" },
{ "field": "StudentId", "title": "Id" },
{ "field": "Address", "title": "Address", template: "<div ng-class='getclass(#:Address#)'>#:Address#</div>" }
]
All depends on what is your getclass() method returning, the expression must evaluate to true for one of the listed css classes eg. following will add red onto a <p> tag , (you can't return only string name of the class):
<p ng-class=" {red : true}" >Using String Syntax</p>
OR
<span class="base-class" ng-class="myVar='red'">Sample Text</span>
Alternatively you need to use ng-model to swap in between the classes you listed in the ng-class attribute:
<p ng-class="style">Using String Syntax</p>
<input type="text" ng-model="style" placeholder="Type: bold strike red">
OR ng-click to set the variable representing the class.
<input id="clearbtn" type="button" value="clear" ng-click="myVar=''">
<br>
<span class="base-class" ng-class="myVar='my-class'">Sample Text</span>
Look into the documentation.
This is how you pass the kendo template variable into the scope method (plunker):
$scope.columns = [
{ "field":"name", "title": "name", template: '<div ng-class="getClass(\'#:name#\')">#:name#</div>' },
];
data-ng-class my concern is how to bind it with kendo data item. as kendo using #:PropertyName# format.