Question

我想根据td值（“认证类型”）更改行的颜色。假设认证类型A然后是黑色，如果B然后是红色......但是当我放置{{details[0].gen_certification_type.certification_type_name}}而不是直接文本时它不起作用..

<script type="text/javascript"
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript">

    $(document).ready(function(){
        $('#table_id td.y_n').each(function(){
            if ($(this).text() == 'Mandatory') {
                $(this).css('color', 'red');
            }
            else if ($(this).text() == 'Voluntary') {
                $(this).css('color','green');
            }
            else if ($(this).text() == 'Accreditation') {
                $(this).css('color','blue');
            }
        });
    });

</script>

这是表格代码

<table id="table_id"  class="table table-bordered">
    <tr>
        <th>Product Standard</th>
        <td>{{details[0].gen_product_name.product_standard}}</td>
    </tr>
    <tr>
        <th><mark style="font-weight: bold;">Certification Type</mark></th>
        <td class="y_n">{{details[0].gen_certification_type.certification_type_name}}</td>
    </tr>
</table>

这是我的控制器功能代码

 public function ajax_list_of_application_details_by_id() {
    $this->autoRender = FALSE;
    $data = json_decode(file_get_contents("php://input"));
    $params = array();
    $params[] = $data->id;
    $result = $this->OnlineApplication->callProcedure('OnlineApplicationListDetailsById', $params);
    echo json_encode($result);
}

这是我的角度js代码：

$scope.app_details_id = function (id) {
    $scope.app_id = id;
    $scope.app_production_details_id(id);
    $scope.app_attachments_details_id(id);
    $http.post('ajax_list_of_application_details_by_id', {'id': id})
            .success(function (data) {
                $scope.details = data;
              //  $scope.certificate_type=details[0].gen_certification_type.certification_type_name;
                //console.out($scope.details);
                return false;
            })
}

Answer 1

使用ngStyle：

<tr ng-style="{'color': getColor(details[0].gen_certification_type.certification_type_name)}"></tr>

控制器：

$scope.getColor = function(type_name) {
    switch(type_name) {
        case 'a': return 'red'
                  break;
        case 'b': return 'black' //and so on...
                  break;
    }
}

在json编码时根据值更改表文本的颜色

1 个答案: