Angularjs Goodness — How to highlight selected row using ngClass

angularJs, ngClass directive vests lots of CSS power in it. Here is one problem ngClass solves so effortlessly.
Problem –  highlight  selected row in a table when user clicks it,  use ngRepeat directive to display all the rows in the table.
Solution
//Step 1. on ng-click call a method and pass the $index to it. say select($index).
//Note - $index is a property of ng-Repeat and represents the index of the selected row
<div ng-controller ="MyCtrl">
<tr ng-repeat="car in cars" ng-click="select($index)">
<td>..</td>
<tr>
</div>
//Step2 - On MyCtrl Controller, store the index
$scope.select = function(index){
$scope.index = index
}
//Step 3- Add ng-Class directive to row , here we are applying the info class in when the index is selected
<tr ng-repeat="car in cars" ng-click="select($index)" ng-class="{'info':$index == index}">
//enjoy
view rawhighlightSelectedRow hosted with ❤ by GitHub

Comments

Post a Comment

Popular posts from this blog

Apache Airflow Wait Between Tasks

 Apache Airflow allows you to create custom workflows that can be triggered on a recurring basis at specific time intervals based on your needs. Some concepts to learn are DAGs - this defines the entire workflow Tasks - are the Individual tasks that constitute the workflow Operators - This is an airflow-specific concept, which needs to be understood, Based on what type of tasks you would like to perform there are multiple operators. To run a bash script there is a BashOperator, to run a python code you need to have a Python Operator. For more details, refer  https://airflow.apache.org/docs/apache-airflow/stable/concepts/index.html Above 3 are sufficient to get started, ofcourse there are others like interprocess communication, variables, process dependency management, etc. Let's Define a Simple Workflow we want to achieve DAG = Tasks1 >> Wait for a Day >> Task2 Above is the DAG, where two tasks are executed, second task depends on first task and is executed after a d
Read more

Hibernate Interview Questions

1. What are the main classes of  Hibernate Session SessionFactory Criteria Query Transaction 2. Lazy loading vs Eager Loading 3. Why is second-level caching not enabled by default? The second Level cache is disabled by default because the configuration and choice of which entities are cacheable is application-specific. In JPA, you can turn on cache for a particular domain with annotation @Cacheable
Read more

Java Spring Interview Questions

Java Spring Interview Questions 1. Have you used any Docker? 2. Suppose there is a requirement that for every call we need to create a new instance, how can that be done in Spring Boog Answer - using Spring bean with Scope as Prototype and then every time you need a bean, get the SpringApplicationContext and call ctx.getBean() 3. When a REST API POST call is made, how is that converted to Java objects to work in your controller or service layer Answer - Spring offers ViewResolvers, you can use JSONResolver to convert the JSON inputs to a Java Bean which then can be consumed by Controllers 4. How can you achieve Auto Scaling in kubernetes 5. Have you worked in Hibernate JPA or Spring JDBC in your projects? Answer - both , while Hibernate JPA is good for queries, there are some queries where its not efficient enough and you need to have SQLs itself, like if you want to do a bulk update 6. Explain the process of having your Spring WAR deployed on Kubernetes Cluster? 7. Explain how JWT Aut
Read more