使用自定义CSS修改ng-grid复选框，修改空间

Question

I'm bad with CSS, and so far no luck. 我对CSS很不好，到目前为止还没有运气。 For some reason, the CSS style won't apply to .ngSelectionCheckbox and .ngSelectionHeader . 由于某些原因，CSS样式不适用于.ngSelectionCheckbox和.ngSelectionHeader 。

I'm trying to use the CSS from csscheckbox.com, changed the class name from the readme to mine and no luck. 我正在尝试使用csscheckbox.com中的CSS，将类名称从自述文件更改为我的文件，也没有运气。

This is my current table: 这是我当前的表格： 在此处输入图片说明

This is what i need it to look like: 这就是我需要的样子： 在此处输入图片说明

Also, I have no idea how to make the bottom of the row push up, and align the checkboxes appropriately with the numbers. 另外，我也不知道如何使行的底部向上移动，并使复选框与数字正确对齐。

Your help is greatly appreciated. 非常感谢您的帮助。

Answer 1

Ok, while I am not going to style the whole thing for you, the functionality of checking the box is like so 好的，虽然我不会为您设计整个样式，但选中复选框的功能就像

HTML: HTML：

<body ng-app="TestApp">
    <div ng-controller="TestController">
        <table>
          <tr>
            <th></th>
            <th>CPT CODE/Service Provider;</th>
            <th>Average Cost</th>
            <th>Offered Price</th>
          </tr>
          <tr ng-repeat="row in data" ng-class="{'selected': row$index}">
              <td><input type="checkbox" ng-model="row$index" /></td>
              <td>{{row.code}}</td>
              <td>{{row.cost}}</td>
              <td>{{row.price}}</td>
          </tr>
        </table>
    </div>
</body>

CSS: CSS：

.selected {
    background-color:#ff00ff;
}

CONTROLLER: 控制器：

var app = angular.module("TestApp",[]);

app.controller("TestController", function($scope)
{
    $scope.data = [
        {
            "code":"a",
            "cost": 11,
            "price": 10
        },
        {
            "code":"b",
            "cost": 21,
            "price": 20
        },
        {
            "code":"c",
            "cost": 31,
            "price": 30
        }
    ];
});

FIDDLE: http://jsfiddle.net/25NVD/ 内容： http : //jsfiddle.net/25NVD/

The jist of it is, use ng-repeat to make the rows, use ng-class to assign the 'selected' class when row$index is checked. 最主要的方法是，使用ng-repeat制作行，并在检查row$index时使用ng-class分配“ selected”类。 $index is the count created by ng-repeat which I used to make a unique model. $index是ng-repeat创建的计数，我曾用它来制作一个唯一的模型。

使用自定义CSS修改ng-grid复选框，修改空间

问题描述

1 个解决方案

解决方案1
0 2014-07-18 22:10:28

使用自定义CSS修改ng-grid复选框，修改空间

问题描述

1 个解决方案

解决方案1 0 2014-07-18 22:10:28

解决方案1
0 2014-07-18 22:10:28