Skip to main content

AngularJS - Tables

Table data is normally repeatable by nature. ng-repeat directive can be used to draw table easily.  Following example states the use of ng-repeat directive to draw a table. <table> <tr> <th> Name </th> <th> Marks </th> </tr> <tr ng-repeat = "subject in student.subjects" > <td> {{ subject.name }} </td> <td> {{ subject.marks }} </td> </tr> </table> Table can be styled using CSS Styling. <style> table , th , td { border : 1px solid grey ; border - collapse : collapse ; padding : 5px ; } table tr : nth - child ( odd ) { background - color : #f2f2f2; } table tr : nth - child ( even ) { background - color : #ffffff; } </style> Example Following example will showcase all the above mentioned directive. <html> <head> <
Post a Comment

AngularJS Animations

<!DOCTYPE html>
<html>
<style>
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.ng-hide {
  height: 0;
  width: 0;
  background-color: transparent;
  top:-200px;
  left: 200px;
}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>

<body ng-app="ngAnimate">

<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>

<div ng-hide="myCheck"></div>

</body>
</html>

Comments

Post a Comment

Comment

Popular posts from this blog

AngularJS - Tables

Table data is normally repeatable by nature. ng-repeat directive can be used to draw table easily.  Following example states the use of ng-repeat directive to draw a table. <table> <tr> <th> Name </th> <th> Marks </th> </tr> <tr ng-repeat = "subject in student.subjects" > <td> {{ subject.name }} </td> <td> {{ subject.marks }} </td> </tr> </table> Table can be styled using CSS Styling. <style> table , th , td { border : 1px solid grey ; border - collapse : collapse ; padding : 5px ; } table tr : nth - child ( odd ) { background - color : #f2f2f2; } table tr : nth - child ( even ) { background - color : #ffffff; } </style> Example Following example will showcase all the above mentioned directive. <html> <head> <
Post a Comment
Read more

How to Password Protect a Directory on Your Website

Password protecting a directory on your site is actually fairly easy. Webmasters typically want to protect a directory if they have information that they want to make available only to a selected number of people. This guide teaches how you can make a folder on  your website  accessible only to people with the appropriate password. If Your Web Host Has a Control Panel Before you dive into the task of manually password-protecting a directory using Apache's built-in facilities, you might want to check out your web host's control panel to see if they already provide the facility for protecting directories. In my experience, many commercial web hosts already provide an easy way for you to password-protect your directories. If such facility is already available, it's probably best to use it since it will save you time, particularly if you are not familiar with shell command lines and editing of .htaccess files. Otherwise, read on. System Requirements You wi
2 comments
Read more

Best eCommerce Platform – Magento or OpenCart?

Looking for Best eCommerce Platform? Business people who are remaining on the precarious edge of beginning their new eCommerce wander all have the same inquiry to confront with sooner or later in time: Best eCommerce Platform? Which eCommerce stage would it be advisable for me to begin my online business? Clearly, When it comes to eCommerce, there is nobody size-fits-all arrangement. There are different strategies and devices that can bring fulfilling results, at the end of the day it relies on upon a couple of fundamental choices that should be made in advance, for example, the span of your online store, your outline inclinations, SEO and probability, and obviously, your financial plan. In this article, we are going to concentrate on two noteworthy rivals in the eCommerce market, Magento Vs. Opencart, and investigate their components and choices to help you choose which one of them (assuming any) is a good fit for you. Before we begin to look at between the two, it ought to
Post a Comment
Read more