AngularJS Hello World

In this example, we do a very simple AngularJS example.

by Kai_Draord

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div ng-controller='MyController as ctrl' ng-app="myApp">
  <form action="" name="form">
    <label for="bike-make-model">Enter make and model of bike</label>
    <div class="input-group p-relative">
      <input name="bikeMakeModel" type="text" ng-model="ctrl.currentBike" class="form-control" id="bike-make-model">
      <span class="input-group-btn ">
            <button class="btn btn-default" ng-click="ctrl.addBike(ctrl.currentBike)" ng-disabled="!ctrl.currentBike">ADD</button>
        </span>
    </div>
    <div class="list-group" ng-if="ctrl.bikes.length > 0">
      <ul>
        <li class="list-group-item" ng-repeat="bike in ctrl.bikes track by $index">
          <span>{{bike}} </span>
          <i ng-click="ctrl.removeBike(bike)" class="fa fa-trash" ></i>
        </li>
      </ul>
    </div>
    
    <button class="btn btn-primary" ng-disabled="!ctrl.form.$valid" ng-click="ctrl.continue()">Next</button>
  </form>
</div>

JavaScript

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

app.controller('MyController', function MyController() {
  this.bikes = [];
  this.currentBike = "";
  this.addBike = (bike)  => {
    this.bikes.push(bike);
    this.currentBike = null;
    this.validate().bind(this);
  }
  this.removeBike = (bike) => {
    this.bikes = this.bikes.filter((b) => bike != b);
    this.validate().bind(this);
  }
  this.validate = (that) => {
  	if(this.bikes.length === 0){
     /* this.form.$setValidity(false) */;
    }else{
    	/* this.form.$setValidity(false) */;
    }
    console.log(this.form);
  }
});