AngularJS Hello World

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

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>
<div ng-controller='MyController' ng-app="myApp">
  <div ng-switch="step">
    <div ng-switch-when="1">
      <div class="row">
        <div class="col-xs-12">
          <div class="form-group">
            <input type="text" ng-model="citySearch" ng-change="showCityList = true" class="form-control input-lg" placeholder="Град">
            <ul ng-if="citySearch.length > 0 && showCityList" class="list-group">
              <li ng-repeat="city in cities | filter: citySearch | orderBy:'name'" class="list-group-item" ng-click="selectCity(city.id, city.name)">{{ city.name }}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript

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

app.controller('MyController', function MyController($scope) {
  /* $http.get(API_URL + "get/cities")
    .then(function(response) {
        $scope.cities = response.data;
      },
      function() {
        console.log('error');
      }); */
	$scope.cities = [{id:0, name:"test"},{id:1, name:"asdf"},{id:2, name:"qwer"},{id:3, name:"asdff"}];
  
  $scope.step = 1;
  
  $scope.selectCity = function(cityId, name) {
    $scope.citySearch = name;
    $scope.showCityList = false;
  };
});