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

Question

当可用股票等于10时，AngularJS是否有可能改变行的风格？或者有什么方法可以做到这一点？...怎么做？

这是我的代码..

<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

您可以通过将一个带有测试的对象传递给inventory.price值来完成ng-class：

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

Answer 2

你可以通过html标记和js代码用anulgarJS改变行的样式：

1. 标记 -

   1.1。 ng-style ：<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>

2. js code -

   2.1。指令链接功能：

   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>

您可以使用上述语法突出显示表格行