JSFiddle - React, Tailwind, and code Playground

angular testing with ng-controller ng-repeat

by oktaviardi pratama

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="myCustomApp">

  <h1>hallo User!</h1>
  <div ng-controller="showDataUser">

    <ul>
      <li ng-repeat="printData in names">
        {{
        printData.nama + ' work as ' + printData.title
        }}
      </li>
    </ul>
    -----------------------------------
    <h3>using orderBy</h3>
    <ul>
      <li ng-repeat="printData in names | orderBy:'nama'">
        {{printData.nama | uppercase }}
      </li>
    </ul>
    -----------------------------------
    <h3>using filter</h3>
    <ul>

      <select class="form-control" ng-model="filterBy" >
        <option>front end</option>
        <option>cto</option>
        <option>product manager</option>
        <option>back end developer</option>
        <option>ux</option>
      </select>

      <li ng-repeat="printData in names | filter:filterBy | orderBy:'nama'">
        {{printData.nama | lowercase }}
      </li>
    </ul>
  </div>

  -----------------------------------
  <div ng-controller="addUser" >
    <h3>using input</h3>
    <form class="form-inline" >
      <div class="form-group">
        <label for="exampleInputName2">Name</label>
        <input type="text" class="form-control" id="exampleInputName2" placeholder="first name" ng-model="firstName">
      </div>
      <div class="form-group">
        <label for="exampleInputName2">Name</label>
        <input type="text" class="form-control" id="exampleInputName2" placeholder="last name" ng-model="lastName">
      </div>
      <div class="form-group">
        <label for="exampleInputEmail2">Email</label>
        <input type="email" class="form-control"...

JavaScript

angular.module('myCustomApp',[]).controller('showDataUser',function($scope){
 $scope.names=[
  {nama:'okta',title:'front end'},
  {nama:'reza',title:'CTO'},
  {nama:'gilang',title:'front end'},
  {nama:'aulia',title:'ux'},
  {nama:'ferdi',title:'back end developer'},
  {nama:'sutrisno',title:'product manager'},
  {nama:'uung',title:'back end developer'}
 ];
}).controller('addUser',function($scope){
  $scope.firstName="oktaviardi";
  $scope.lastName="pratama";
  $scope.emailAddress="[email protected]";
  
});