pongstr/the-rective.html

## the-rective.html
<!doctype html>
<html ng-app="app">
<head>

  <meta charset="utf-8">

  <title>AngularJS App</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">

  <!-- Bootstrap & Font-Awesome
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
  -->

  <!-- Vanilla Stuff, Normalize Only -->
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  <style>
    html, body {
      height: 100%;
    }

    body > .container {
      height: 100px;
      padding-top: 100px;
      padding-bottom: 100px;
    }

    .placeholder {
      list-style: none;
      height: 100px;
      border: 1px solid #ddd;
      background-color: #eee;
    }
  </style>
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->

</head>
<body ng-controller="appCtrl">

  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <h3>List 1</h3>
        <ul ui-sortable="sortableOptions" ng-model="dataList1" class="list-group">
          <li ng-repeat="data in dataList1 track by $index" class="list-group-item">
            <address>
              <strong>{{ data.fname }} {{ data.lname }}</strong><br>
              {{ data.address }} <br>
              {{ data.state }} {{ data.state }} {{ data.state }} <br>
              <abbr>Phone: </abbr> {{ data.tel }}
            </address>
          </li>
        </ul>

      </div>

      <div class="col-sm-4">
        <strong>List 1 Data</strong>
        <pre>
          {{ dataList1 | json }}
        </pre>

        <strong>List 2 Data</strong>
        <pre>
          {{ dataList2 | json }}
        </pre>
      </div>

      <div class="col-sm-4">
        <h3>List 2</h3>
        <ul ui-sortable="sortableOptions" ng-model="dataList2" class="list-group">
          <li ng-repeat="data in dataList2 track by $index" class="list-group-item">
            <input type="text" ng-model="data.fname" class="form-control">
            <mcoy mcoy-update="data.fname">
              test
            </mcoy>
            <address>
              <strong>{{ data.fname }} {{ data.lname }}</strong><br>
              {{ data.address }} <br>
              {{ data.state }} {{ data.state }} {{ data.state }} <br>
              <abbr>Phone: </abbr> {{ data.tel }}
            </address>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <!-- begin awesome here -->
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>

  <!--  Angular stuff goes here -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-resource.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-sortable/0.12.11/sortable.min.js"></script>
  <script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
  <script>
    angular.module('app', ['ngResource', 'ui.sortable']);

    angular
      .module('app')
      .controller('appCtrl', function ($scope, $http) {

        var dataset1 = 'http://filltext.com/?rows=5&fname={firstName}&lname={lastName}&tel={phone|format}&address={streetAddress}&city={city}&state={usState|abbr}&zip={zip}';
        var dataset2 = 'http://filltext.com/?rows=5&fname={firstName}&lname={lastName}&tel={phone|format}&address={streetAddress}&city={city}&state={usState|abbr}&zip={zip}';

        $scope.sortableOptions = {
          connectWith: '.list-group',
          placeholder: 'placeholder',
          forcePlaceholderSize: true
        };

        $http
          .get(dataset1)
          .success(function (response) {
            $scope.dataList1 = response;
          })
          .error(function () {
            // Throw error
          });

        $http
          .get(dataset2)
          .success(function (response) {
            $scope.dataList2 = response;
          })
          .error(function () {
            // Throw error
          });
    });


  angular
    .module('app')
    .directive('mcoy', function () {
      return {
        restrict: 'E',
        scope: {
          mcoyUpdate: '=mcoyUpdate'
        },
        template: '<button>{{ mcoyUpdate }}</button>',
        link: function (scope, element, attrs) {
          // element.on('click', function (e) {
          //   $(this).html(scope.mcoyUpdate)
          //   // console.log(scope.mcoyUpdate)
          //   // scope.$watch('mcoyUpdate', function (newValue, oldValue) {
          //   //   scope.mcoyUpdate = newValue;
          //   // });
          //   e.preventDefault();
          // });
          scope.$watch('mcoyUpdate', function (newValue, oldValue) {
            scope.mcoyUpdate = newValue;
            element.on('click', function(e) {
              alert(scope.mcoyUpdate)
            });
          });

        }
      }
    });

  </script>

</body>
</html>
	<!doctype html>
	<html ng-app="app">
	<head>

	<meta charset="utf-8">

	<title>AngularJS App</title>

	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">

	<!-- Bootstrap & Font-Awesome
	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
	-->

	<!-- Vanilla Stuff, Normalize Only -->
	<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
	<style>
	html, body {
	height: 100%;
	}

	body > .container {
	height: 100px;
	padding-top: 100px;
	padding-bottom: 100px;
	}

	.placeholder {
	list-style: none;
	height: 100px;
	border: 1px solid #ddd;
	background-color: #eee;
	}
	</style>
	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->

	</head>
	<body ng-controller="appCtrl">

	<div class="container">
	<div class="row">
	<div class="col-sm-4">
	<h3>List 1</h3>
	<ul ui-sortable="sortableOptions" ng-model="dataList1" class="list-group">
	<li ng-repeat="data in dataList1 track by $index" class="list-group-item">
	<address>
	<strong>{{ data.fname }} {{ data.lname }}</strong><br>
	{{ data.address }} <br>
	{{ data.state }} {{ data.state }} {{ data.state }} <br>
	<abbr>Phone: </abbr> {{ data.tel }}
	</address>
	</li>
	</ul>

	</div>

	<div class="col-sm-4">
	<strong>List 1 Data</strong>
	<pre>
	{{ dataList1 \| json }}
	</pre>

	<strong>List 2 Data</strong>
	<pre>
	{{ dataList2 \| json }}
	</pre>
	</div>

	<div class="col-sm-4">
	<h3>List 2</h3>
	<ul ui-sortable="sortableOptions" ng-model="dataList2" class="list-group">
	<li ng-repeat="data in dataList2 track by $index" class="list-group-item">
	<input type="text" ng-model="data.fname" class="form-control">
	<mcoy mcoy-update="data.fname">
	test
	</mcoy>
	<address>
	<strong>{{ data.fname }} {{ data.lname }}</strong><br>
	{{ data.address }} <br>
	{{ data.state }} {{ data.state }} {{ data.state }} <br>
	<abbr>Phone: </abbr> {{ data.tel }}
	</address>
	</li>
	</ul>
	</div>
	</div>
	</div>

	<!-- begin awesome here -->
	<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>

	<!-- Angular stuff goes here -->
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-resource.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-sortable/0.12.11/sortable.min.js"></script>
	<script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
	<script>
	angular.module('app', ['ngResource', 'ui.sortable']);

	angular
	.module('app')
	.controller('appCtrl', function ($scope, $http) {

	var dataset1 = 'http://filltext.com/?rows=5&fname={firstName}&lname={lastName}&tel={phone\|format}&address={streetAddress}&city={city}&state={usState\|abbr}&zip={zip}';
	var dataset2 = 'http://filltext.com/?rows=5&fname={firstName}&lname={lastName}&tel={phone\|format}&address={streetAddress}&city={city}&state={usState\|abbr}&zip={zip}';

	$scope.sortableOptions = {
	connectWith: '.list-group',
	placeholder: 'placeholder',
	forcePlaceholderSize: true
	};

	$http
	.get(dataset1)
	.success(function (response) {
	$scope.dataList1 = response;
	})
	.error(function () {
	// Throw error
	});

	$http
	.get(dataset2)
	.success(function (response) {
	$scope.dataList2 = response;
	})
	.error(function () {
	// Throw error
	});
	});


	angular
	.module('app')
	.directive('mcoy', function () {
	return {
	restrict: 'E',
	scope: {
	mcoyUpdate: '=mcoyUpdate'
	},
	template: '<button>{{ mcoyUpdate }}</button>',
	link: function (scope, element, attrs) {
	// element.on('click', function (e) {
	// $(this).html(scope.mcoyUpdate)
	// // console.log(scope.mcoyUpdate)
	// // scope.$watch('mcoyUpdate', function (newValue, oldValue) {
	// // scope.mcoyUpdate = newValue;
	// // });
	// e.preventDefault();
	// });
	scope.$watch('mcoyUpdate', function (newValue, oldValue) {
	scope.mcoyUpdate = newValue;
	element.on('click', function(e) {
	alert(scope.mcoyUpdate)
	});
	});

	}
	}
	});

	</script>

	</body>
	</html>