javascript - 如何通过 AngularJS 制作每个单元格具有不同颜色和 css 行为的表格..

Question

我是 AngularJs 程序的初学者。我需要制作一张表格，表格中的每个单元格都有不同的颜色。 json 文件中的所有数据。有一个例子。

在 HTML 中 {{b}}

在 JS 中。

   var response = $http.get("api/GeneralSchedule/GeneralSchedule_jsonTemplate.json"
    ).success(function(data,status, headers,config){
      $scope.contexts = data.data;

 }

//json

 {
   data:[
         //first Row.
        {
        columns:[
           {
               "val":"a",
                "under_scope":"false",
               "color":"black"
             },
           {
               "val":"b",
                "under_scope":"false",
               "color":"purple"
           }  
        ]
        },

          // second row.
        {
        columns:[
           {
               "val":"c",
                "under_scope":"true",
               "color":"green"
             },
           {
               "val":"d",
                "under_scope":"true",
               "color":"blue"
           }  
        ]
        }
     ]
}

我只是举个例子。希望不会造成困惑。

所以我想用 AugularJS 处理 under_scope 和颜色，而不是使用 JQuery。

有人可以帮助我吗？

Answer 1

你可以使用 ng-style 来实现

<tr ng-repeat="row in data">
   <td ng-repeat="col in row.column">
      <span ng-style="{'color': col.color}">{{col.val}}</span>
   </td>
</tr>

ng-style 需要短对象语法。