Angular根据获取值不同给不同的样式

1：数据源

function ctrSettingtable($scope,$routeParams) {$scope.body_data = [
  {
    "pid":"1",
    "fname":"jason",
    "lname":"kilby",
    "logname":"jasonktby",
    "company":"CAP Systems",
    "email":"[email protected]",
    "not":" ",
    "active":"0 ",
    "ass":" ",
    "eid":" ",
    " check":" "
  },
  {
    "pid":"2",
    "fname":"jason",
    "lname":"kilby",
    "logname":"jasonktby",
    "company":"CAP Systems",
    "email":"[email protected]",
    "not":" ",
    "active":"1 ",
    "ass":" ",
    "eid":" ",
    " check":" "
  }  ];
}

请注意查看上面的 “active”的值，一个是“0”，一个是“1”。现在我们根据“active”的值不同来给样式。

html:

<i  ng-class="{1:'fa fa-check',0:' fa fa-times'}[{{x.active}}]"></i>

效果：

样式颜色就你自己给了 .fa是字体图标

借此再举个例子

我们经常会遇到，在界面上展示性别，但是数据库里面存的是0或者1，那么，总要对它作个转换。

原始数据

var tom = {
    name: "Tom",
    gender: 1
};

我们可以做些改变：

<div>{{formatGender(tom.gender)}}</div>

$scope.formatGender = function(gender) {
    if (gender == 0)
        return "女";

    if (gender == 1)
        return "男";
    }
};

这样我们就达到了目的。这个例子让我们发现，原来，在绑定表达式里面，是可以使用函数的。像我们这里的格式化函数，其实作用只存在于视图层，所以不会影响到真实数据模型。

注意：这里有两个注意点。


第一，在绑定表达式里面，只能使用自定义函数，不能使用原生函数。举个例子：

<div>{{Math.abs(-1)}}</div>

这句就是有问题的，因为Angular的插值表达式机制决定了它不能使用这样的函数，它是直接用自己的解释器去解析这个字符串的，如果确实需要调用原生函数，可以用一个自定义函数作包装，在自定义函数里面可以随意使用各种原生对象，就像这样：

<div>{{abs(-1)}}</div>

$scope.abs = function(number) {
    return Math.abs(number);    
};

第二，刚才我们这个例子只是为了说明可以这么用，但不表示这是最佳方案。Angular为这类需求提供了一种叫做filter的方案，可以在插值表达式中使用管道操作符来格式化数据