如果可用数量列等于 10，如何更改 table 行中的样式

Question

是否可以在 AngularJS 中更改可用股票等于 10 时的行样式？或者有什么办法可以做到这一点？..该怎么做？

这是我的代码..

<table id='table12'>
    <thead id='top'>
        <tr>
            <th>Product ID</th>
            <th>Product Name</th>
            <th>Price</th>
            <th>Stock In</th>
            <th>Available Stocks</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr id="clickrow" ng-repeat="inventory in data | filter:searchFilter">
            <td onclick="showDialog()" ng-click="showInEdit(inventory)">{{inventory.product_id}}</td>
            <td onclick="showDialog()" ng-click="showInEdit(inventory)">{{inventory.product_name}}</td>
            <td onclick="showDialog()" ng-click="showInEdit(inventory)">{{inventory.price}}</td>
            <td onclick="showDialog()" ng-click="showInEdit(inventory)">{{inventory.stock_in}}</td>
            <td onclick="showDialog()" ng-click="showInEdit(inventory)">{{inventory.available_stocks}}</td>
            <td onclick="showDialog()" ng-click="showInEdit(inventory)">{{inventory.description}}</td>
        </tr>
    </tbody>
</table>

Answer 1

您可以使用 ng-class 通过传递一个针对 inventory.price 值的对象进行测试：

<tr id="clickrow" ng-repeat="inventory in data | filter:searchFilter" ng-class="{'red' : inventory.price <= 10}">
    ...
</tr>

Answer 2

您可以通过 html 标记和 js 代码使用 anulgarJS 更改行的样式：

标记 -

1.1。 ng 风格: <div data-ng-style="{background: price > 50 ? 'red' : 'green'}"></div>

1.2。 ng-class: <div data-ng-class="{'some-class-name': price > 50, 'other-class-name': price <= 50}></div>
js代码-

2.1。指令 link 函数：

link: function (scope, element, attrs, ctrl){ element.find('tr').css(...); // like as jquery... }

2.2。 控制器:
```
angular.module('myModule').controller('myCtrl', function($element, $scope){ $element.find('tr').css(...); // like as jquery}  })
```

Answer 3

<tr ng-repeat="task in todos"
                ng-class="{'warning': task.status == 'Hold' , 'success': task.status == 'Completed',
              'active': task.status == 'Started', 'danger': task.status == 'Pending' } "></tr>

您可以使用上面的语法来突出显示 table 行

如果可用数量列等于 10，如何更改 table 行中的样式

how to change style in table row if the available quantity column is equals 10

css

angularjs

angularjs-ng-repeat

ng-class