AngularJS ngClick and ngRepeat

ngclick

Second article about AngularJS and today we are going to see ngClick and ngRepeat directives. I’ve decided to write about these directives because they are very important and we use them all the time.

Let’s assume the following code

(function(){

  var myApp = angular.module('myApp', []);

  myApp.controller("myController", function($scope){

  });

})();

Wrapping your Javascript in a closure is a good habit!

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <title>AngularJS ngClick and ngRepeat</title>
  </head>
  <body ng-controller="myController">

    <!-- ngClick example goes here -->

    <!-- ngRepeat example goes here -->

    <script src="angular.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

ngClick

The first thing we need to do is to create a button in our HTML code and through the ngClick directive call the click function. After that, we will define the click function inside the controller.

<button ng-click="click();">Click</button>

{{ message }}
myApp.controller("myController", function($scope){

  $scope.click = function(){

    $scope.message = "It's working!";

  }

}

Great. The button is working through the ngClick directive and the message expression we’ve created was replaced by “It’s working”.

ngRepeat

When we work with AngularJS, objects and arrays are used daily. Let’s continue our example including an array of objects and store the data inside the controller

myApp.controller("myController", function($scope){
  
  $scope.message = "It's working!";
  $scope.users = json; // Storing data inside the controller

});

var json = [
  {name: "Guilherme", email: "guilherme@test.com", age: "22"},
  {name: "Milena", email: "milena@test.com", age: "26"}
];

Now we’ve got a user array, simulating a JSON in the real life ;) How do we print out this data inside our webpage? We need to use the ngRepeat directive.

<ul>
  <li ng-repeat="user in users">{{ user.name }}</li>
</ul>

The page has been printed out with all the names. But we need to print out the email as well as the age. What do you think about changing the list to a table? It will be easy.

<table>
  <tr ng-repeat="user in users">
    <td>{{ user.name }}</td>
    <td>{{ user.email }}</td>
    <td>{{ user.age }}</td>
  </tr>
</table>

What if we want to keep our list and print out the name, email and age?

<ul>
  <li ng-repeat-start="user in users">{{ user.name }}</li>
  <li>{{ user.age }}</li>
  <li ng-repeat-end>{{ user.email }}</li>
</ul>

Conclusion

The ngClick and ngRepeat directives are extremely easy to work with. JSON works great with the ngRepeat directive and it’s very common to use. You can find these examples on GitHub https://github.com/guinatal/blog-examples

Understanding CSS Combinators

Combinators

Have you already used the following combinator before?

div ~ p {
  background-color: skyblue;
}

We have just seen the general sibling selector and it can be very useful. Let’s check it out! There are four combinators in CSS3.

  • Descendant Selector
  • Child Selector
  • Adjacent Sibling Selector
  • General Sibling Selector CSS3

Descendant Selector

The descendant selector matches all elements that are descendants of a specified element. The following example selects all p elements inside div elements:

div p {
  background-color: skyblue;
}
<article>
  <h1>Descendant Selector</h1>
  <div>
    <p>Descendant Selector 1</p>
    <p>Descendant Selector 2</p>
    <section>
      <p>Descendant Selector 3</p>
      <p>Descendant Selector 4</p>
    </section>
  </div>
  <p>Descendant Selector 5</p>
  <p>Descendant Selector 6</p>
</article>

Descendant Selector

Child Selector

The child selector selects all elements that are the immediate children of a specified element. The following example selects all p elements that are immediate children of a div element:

div > p {
  background-color: skyblue;
}
<article>
  <h1>Child Selector</h1>
  <div>
    <p>Child Selector 1</p>
    <p>Child Selector 2</p>
    <section>
      <p>Child Selector 3</p>
      <p>Child Selector 4</p>
    </section>
  </div>
  <p>Child Selector 5</p>
  <p>Child Selector 6</p>
</article>

Child Selector

Adjacent Sibling Selector

The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element. Sibling elements must have the same parent element, and “adjacent” means “immediately following”. The following example selects all p elements that are placed immediately after div elements:

div + p {
  background-color: skyblue;
}
<article>
  <h1>Adjacent Sibling Selector</h1>
  <div>
    <p>Adjacent Sibling Selector 1</p>
    <p>Adjacent Sibling Selector 2</p>
    <section>
      <p>Adjacent Sibling Selector 3</p>
      <p>Adjacent Sibling Selector 4</p>
    </section>
  </div>
  <p>Adjacent Sibling Selector 5</p>
  <p>Adjacent Sibling Selector 6</p>
</article>

Adjacent Sibling Selector

General Sibling Selector

The general sibling selector selects all elements that are siblings of a specified element. The following example selects all p elements that are siblings of div elements:

div ~ p {
  background-color: skyblue;
}
<article>
  <h1>General Sibling Selector</h1>
  <div>
    <p>General Sibling Selector 1</p>
    <p>General Sibling Selector 2</p>
    <section>
      <p>General Sibling Selector 3</p>
      <p>General Sibling Selector 4</p>
    </section>
  </div>
  <p>General Sibling Selector 5</p>
  <p>General Sibling Selector 6</p>
</article>

General Sibling Selector

Conclusion

If you are a new learner or just improving your CSS skills, you need to know that CSS Combinators are used all the time by front-end developers. We have just seen very basic examples and most of the times they are used just like that. But you can also make different combinations using all of them.