Angular: Basic Skills Test

http://angularjs.org/

by godswatchdog

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/css/bootstrap.css">
<div ng-app="app" ng-controller="myCtrl">

  <div class="row">
    <div class="col-sm-6 col-md-6" ng-repeat="post in posts | filter:{'userId':  1}:true | orderBy:'title'" ng-if="$index < 5">
      <h3>{{post.title}}</h3>
      <span>User Id: {{post.userId}}</span><br/>
      <span>{{post.body}}</span><br/><br/>
    </div>
    <div class="col-sm-6 col-md-6" ng-repeat="post in posts | filter:{'userId':  1}:true | orderBy:'title'" ng-if="$index >= 5">
      <h3>{{post.title}}</h3>
      <span>User Id: {{post.userId}}</span><br/>
      <span>{{post.body}}</span><br/><br/>
    </div>
  </div>
</div>

SCSS

#col {
    padding: 5px;
    line-height: 1.4; 
    h1 {
      font-weight: bold;
      font-size: 24px;
    }
    ul {
      list-style: square;
      li {
        font-size: 17px;
        padding-left: 10px;
      }
    }
}

JavaScript

angular.module('app', []);

angular.module('app').controller('myCtrl', function($scope, $http) {

  $http.get('http://jsonplaceholder.typicode.com/posts').then(function(results) {
    $scope.posts = results.data;
  });

});