Search code examples
cssangularjsangularjs-ng-repeatng-class

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

Is it possible in AngularJS to change the style of row when the available stocks is equals to 10? or is there any way to do this?.. how to do that?

enter image description here

Here's my code..

<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>
Solution

  • You can do it with ng-class by passing an object with a test against inventory.price value:

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