Learning Firebase: Structuring your data to show filtered list — Making a blog pt. 1. Advanced Part: Sorting Of course, blogs are sorted by date (let’s say date_created). We can change the data structure now to be: See that we removed the date_created part in each of the articles and changed the published value inside the items in article_list from 1 and 0 to date (in UTC milliseconds starting from midnight January 1 1970). From this we can set the rules to be: // Firebase Rules snippet We just need to check if the published attribute exists. Then, we can change the code to accommodate the changes: var articles = []var limit = 2 // then after getting the necessary datafunction sortArticle() { article.sort(function(a, b) { return a.published < b.published }) // show article list in sorted} What did I do here? If you have noticed, we still needed to sort it. You can see a working version of that above here. AngularJS – Conditional Display using ng-show / ng-hide, ng-if, ng-include, ng-switch – Reality on Web.
Hiding or showing parts of a DOM based on some conditions is a common requirement. AngularJS has four different directives (ng-show / ng-hide, ng-if, ng-include, ng-switch), which are used to conditionally display or hide the HTML DOM elements. Conditional display using ng-show/ng-hide The ng-show / ng-hide directives require a boolean value to evaluate the visual state. This boolean value may come from a variable or a function. /*ng-show / hide */ <div ng-show=”showSecretData”>Secret data</div> /*same can be re-written using ng-hide directive */ <div ng-hide=”! ShowSecretData”>Secret data</div><div ng-show=”name == ‘myName’”>Some data</div><div ng-show=”Display()”>Some data</div> Demo of ng-show / ng-hide directive Download this demo example of ng-hide / ng-show directive ng-show / ng-hide directives apply ‘display:none’ to hide the DOM elements, hidden elements are not removed from the DOM tree.
Conditional display using ng-switch directive Demo of ng-switch and ng-if directive. AngularJS Tutorial. AngularJS is a very powerful JavaScript Framework. It is used in Single Page Application (SPA) projects. It extends HTML DOM with additional attributes and makes it more responsive to user actions. AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache license version 2.0. This tutorial is designed for software professionals who want to learn the basics of AngularJS and its programming concepts in simple and easy steps.
You should have a basic understanding of JavaScript and any text editor. For most of the examples given in this tutorial you will find Try it option available, so just make use of it to see the output of your code and enjoy your learning. Try following example using Try it option available at the top right corner of the below sample code box − <! AngularJS — Superheroic JavaScript MVW Framework. Learn and Understand AngularJS - The First 50 Minutes.