在angular和kendo-grid中使用ng-class

Question

我在当前的应用程序中使用了KendoUI的Angular指令。当我需要使用基于某个字段值的ng-class时，我会遇到这样的情况。我试过下面的代码，但它不起作用

 $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>" }
    ]

Answer 1

这一切都取决于getclass()方法返回什么，对于列出的css类之一，表达式的计算结果必须为true。下面将在<p>标记上添加红色(您不能只返回类的字符串名)：

<p ng-class=" {red : true}" >Using String Syntax</p>

或

<span class="base-class" ng-class="myVar='red'">Sample Text</span>

或者，您需要使用ng-model在ng-class属性中列出的类之间进行交换：

<p ng-class="style">Using String Syntax</p>
<input type="text" ng-model="style" placeholder="Type: bold strike red">

或ng-click来设置表示类的变量。

 <input id="clearbtn" type="button" value="clear" ng-click="myVar=''">
 <br>
 <span class="base-class" ng-class="myVar='my-class'">Sample Text</span>

查看documentation。

下面是如何将kendo模板变量传递到作用域方法(plunker)中：

   $scope.columns = [
                  { "field":"name", "title": "name",  template: '<div ng-class="getClass(\'#:name#\')">#:name#</div>'  },
    ];