angular andy1

by Andy Bulka

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
Playing with angular ANDYANDY
<hr>
<div class="log">
    <a href="#" id="clearlog">Clear</a>
    <div id="log"></div>
</div>
<hr>
<div class="ng-app" ng-controller="MyCtrl">
   <input type="text" ng-model="yourName" placeholder="Enter a name here">
   Hello {{yourName}}! and Columbo says {{getmsg()}}
       
   <input type="text" ng-model="tvhours" placeholder="Enter the number of tv hours">
       <a href="" ng-click="tvIncrement()">increment</a>
       <input type="button" ng-click="tvIncrement()" value="Increment" id="btn_01" />
       <input type="button" ng-click="resetFields()" value="Reset Fields" />
   <h3>Tv hours is {{tvhours}} and adding one = {{getTvHoursCalc()}}</h3>
   The tv hours converted to a list is: {{zzs()}}
   <ul>
     <li ng-repeat="z in zzs()">
         {{z}} <input type="checkbox" />
     </li>
   </ul>
   <input ng-class="{on: togg1}" type='button' ng-click="toggle1()" value="toggle1"/>
   <input ng-class="{on: toggle2}" type='button' ng-click="toggle2 = !toggle2" value="toggle2"/>
   <div class="mybox">
     info: 
     <span ng-show="togg1"><i>togg1 true via toggle1()</i></span>
     <span ng-show="toggle2"><i>toggle2 is true</i></span>
   </div>
    <!--
    <hr>
    <i>Note: app2 technique doesn't work - commented out for now.</i>
    <div ng-app="app2" ng-controller="Controller2">
        <hello></hello>
    </div>
    <hr>
    -->
    
    <p>Ok let's cheer up, let's play with formatting filters.  This is some currency {{ 1232.12 | currency }} and this is some json {{j1 | json }}. <p>
    <p>And here is togg1 as boolean={{togg1}}.</p>
    <p> And toggle2 is {{toggle2}} <span ng-hide="toggle2_defined()"> ?? hmm that didn't work - looks like you need a real scope object.</span></p>

    <form class="ng-app" name="myForm" ng-controller="MyCtrl2">
      {{getmsg}}
      <input type="radio" ng-model="color" value="red">  Red
      <input...

CSS

.on { color:green; }

JavaScript

function MyCtrl($scope, $rootScope) {
    $scope.getmsg = function() {
        return "greetings";
    }

    $scope.tvhours = 2;
    $scope.getTvHoursCalc = function() {
        return parseInt($scope.tvhours) + 1;
    }
    $scope.tvIncrement = function() {
        $scope.tvhours = parseInt($scope.tvhours) + 1;
    }
    $scope.zzs = function() {
        var lzt = [];
        for (i = 1; i <= $scope.tvhours; i++) 
            lzt.push(i);
        return lzt;
    }

    $scope.resetFields = function() {
        $scope.tvhours = 0;
        $scope.yourName = "";  // this is not declared initially but kicks in later ok
        $scope.toggle2 = false; // ditto, kicks in later.
    }
    $scope.togg1 = true;
    $scope.toggle1 = function() {
        $scope.togg1 = ! $scope.togg1;
        //$scope.$emit('togg1Event', '');  // no parent child relationship so can't
        $rootScope.$broadcast('togg1Event', $scope.togg1);
    }
    $scope.toggle2_defined = function() { 
        return $scope.toggle2 != undefined; 
    }
    $scope.j1 = {'name':'fred','age':30}
}
/*
var app2 = angular.module('app2', []);
app2.controller('Controller2', function($scope) {
}
app2.directive('hello', function() {
  return {
    restrict: "E",
    replace: true,
    template: "<div>Hello readers, thank you for coming</div>"
  }
});
*/

function MyCtrl2($scope) {
    $scope.getmsg = "greetings";
    $scope.color = 'blue';
    $scope.flag = false;
    $scope.flagStr = 'true';
    $scope.$watch('flagStr', function(value) { $scope.flag = value.toString(); });
    $scope.flagTogg = function() {  }
    $scope.$on('togg1Event', function(event, togg1) {
        // state of first controller's .togg1 communicated here 
        // to the 2nd controller.
        // pity I can't set the .flag pure boolean
        $scope.flagStr = togg1 ? 'true' : 'false';
    });
    
    $scope.flag2 = false;
}

$(function () {
    var newOptions = {
        'red' : 'Red',
        'blue' : 'Blue',
        'green' :...