AngularJS

HTML enhanced for web apps! https://angularjs.org/

Examples

example.html

   1 <!doctype html>
   2 <html ng-app="todoApp">
   3     <head>
   4         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
   5         <script src="todo.js"></script>
   6     </head>
   7     <body>
   8         <h2>Todo</h2>
   9         <div ng-controller="TodoListController as todoList">
  10             <h1>{{testx()}}</h1>
  11             <h1>{{todoList.valuesX}}</h1>
  12             <h1>{{selectedOption}}</h1>
  13             <select ng-disabled="todoList.listDisabled" ng-model="selectedOption" ng-change="todoList.change()">
  14                 <option ng-repeat="val in todoList.valuesX" value="{{val}}">                    {{val}}</option>            
  15             </select>
  16         </div>
  17     </body>
  18 </html>

todo.js

   1 var app = angular.module('todoApp', []);
   2 
   3 app.controller('TodoListController', TodoListController );
   4 
   5 function TodoListController($scope,$timeout,$interval,$http) {
   6     console.log('Called TodoListController');
   7     this.valuesX=[];    
   8     this.listDisabled=true;
   9     
  10     this.scope = $scope;
  11     this.scope.selectedOption='';
  12     this.scope.testx = this.testx;
  13     
  14     $timeout(this.fillValues.bind(this),5000);        
  15     $interval(function () { console.log('$interval kkkk llll ' + new Date() );},10000);    
  16     $http.get('todo.js').then(function(response) {
  17         console.log( response.data );
  18     });    
  19 }
  20 
  21 TodoListController.prototype.testx=function(){
  22     return "ASDF";
  23 };
  24 
  25 TodoListController.prototype.fillValues=function(){
  26     console.log('called fill values');
  27     this.valuesX=['aa','bb','cc'];    
  28     this.listDisabled=false;
  29     this.scope.selectedOption='bb'; //select default value
  30     // when calling with $timeout $apply is not needed
  31     //this.scope.$apply();
  32 };
  33 
  34 TodoListController.prototype.change=function(){
  35     console.log('change');
  36     console.log( JSON.stringify(this.valuesX) );
  37     console.log( this.scope.selectedOption );
  38 }