Highlight Selected Row in Table AngularJS

Highlighting a selected row in an AngularJS table is a common requirement for enhancing user experience and providing visual feedback. This article will guide you through different methods to achieve this, from basic techniques to more advanced solutions, ensuring you can choose the best fit for your project.

Basic Row Highlighting with ng-class

The simplest way to highlight a selected row is using the ng-class directive. This directive allows you to dynamically add or remove CSS classes based on a condition. Let’s see how we can use it to highlight a row when clicked.

<table>
  <tr ng-repeat="row in rows" ng-class="{selected: row === selectedRow}" ng-click="selectRow(row)">
    <td>{{row.name}}</td>
    <td>{{row.age}}</td>
  </tr>
</table>

In this example, selectedRow is a variable in your scope that holds the currently selected row. The ng-click directive calls the selectRow function, which updates the selectedRow variable. The ng-class directive then applies the selected class to the row if it matches the selectedRow.

.selected {
  background-color: yellow;
}

Advanced Highlighting with Custom Directives

For more complex scenarios, creating a custom directive offers greater flexibility and reusability. A custom directive encapsulates the highlighting logic, making your code cleaner and easier to maintain.

angular.module('myApp', []).directive('highlightRow', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      element.on('click', function() {
        element.toggleClass('selected');
      });
    }
  };
});

This directive adds the selected class when the row is clicked and removes it on subsequent clicks. You can use it like this:

<table>
  <tr ng-repeat="row in rows" highlight-row>
    <td>{{row.name}}</td>
    <td>{{row.age}}</td>
  </tr>
</table>

Ví dụ highlight row với custom directive

Using $index for Highlighting

You can also utilize the $index variable provided by ng-repeat to highlight rows. This approach is helpful when dealing with array indices directly.

<table>
  <tr ng-repeat="row in rows" ng-class="{selected: $index === selectedIndex}" ng-click="selectedIndex = $index">
    <td>{{row.name}}</td>
    <td>{{row.age}}</td>
  </tr>
</table>

In this case, selectedIndex stores the index of the selected row.

Highlighting Based on Data Attributes

Sometimes, highlighting might depend on a specific data attribute within your row data. You can use ng-class to achieve this:

<table>
  <tr ng-repeat="row in rows" ng-class="{selected: row.isActive}">
    <td>{{row.name}}</td>
    <td>{{row.age}}</td>
  </tr>
</table>

Ví dụ highlight row dựa vào data attribute

Conclusion

Highlighting a selected row in AngularJS tables can be achieved through various methods, ranging from simple ng-class usage to more advanced custom directives. By understanding these techniques, you can improve the user experience of your web applications and provide clear visual feedback. Remember to choose the method that best suits your project’s complexity and requirements. Properly highlighting selected rows enhances usability and makes your application more intuitive for your users.

FAQ

What is the easiest way to highlight a selected row in AngularJS?
Using ng-class with a conditional expression is the simplest approach.
When should I use a custom directive for highlighting?
For complex logic or reusable highlighting behavior, custom directives offer more flexibility.
How can I highlight a row based on its index?
Use the $index variable provided by ng-repeat within ng-class.
Can I highlight based on a data attribute?
Yes, use ng-class and bind it to a property of your row data.
What are the benefits of highlighting selected rows?
It improves user experience and provides clear visual feedback.

Mô tả các tình huống thường gặp câu hỏi.

Người dùng thường hỏi về cách highlight selected row khi làm việc với AngularJS để tăng trải nghiệm người dùng. Các câu hỏi xoay quanh việc sử dụng ng-class, ng-click, custom directive và các cách tiếp cận khác.

Gợi ý các câu hỏi khác, bài viết khác có trong web.

Bạn có thể tìm hiểu thêm về các chủ đề liên quan như “Xử lý sự kiện trong AngularJS”, “Tạo custom directive trong AngularJS”, và “Tối ưu hiệu năng bảng dữ liệu lớn trong AngularJS”.