NKjoep/angular-list-models.html

## angular-list-models.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Input Sample</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
    <script>
      function MyCtrl ($scope) {
        $scope.inputs = [1];
          $scope.myList = {};
          $scope.add = function() {
              $scope.inputs = new Array($scope.inputs.length+1);
          };
          $scope.log = function() {
            console.log($scope.myList);
          };
      };
    </script>
    <style>
      body {
        margin: 1em;
      }
    </style>
  </head>
  <body ng-app>
    <div class="container">
      <h1>List Example</h1>
      <hr />
      <div class="row" ng-controller="MyCtrl">

          <div class="col-xs-6">
            <h2 class="h4">Input</h2>
            <p ng-repeat="n in inputs track by $index">
              <input ng-change="log()" name="input-{{$index}}" ng-model="myList['value' + ($index+1)]" />
            </p>
            <button class="btn btn-primary" ng-click="add()">
              Add One
            </button>
          </div>

          <div class="col-xs-6">
            <h2 class="h4">Result</h2>
            <table class="table">
              <tr class="active">
                <td>Key</td>
                <td>Value</td>
              </tr>
              <tr ng-repeat="(k, v) in myList">
                <td>{{k}}</td>
                <td>{{v}}</td>
              </tr>
            </table>
          </div>

      </div>
    </div>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Input Sample</title>

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css">
	<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
	<script>
	function MyCtrl ($scope) {
	$scope.inputs = [1];
	$scope.myList = {};
	$scope.add = function() {
	$scope.inputs = new Array($scope.inputs.length+1);
	};
	$scope.log = function() {
	console.log($scope.myList);
	};
	};
	</script>
	<style>
	body {
	margin: 1em;
	}
	</style>
	</head>
	<body ng-app>
	<div class="container">
	<h1>List Example</h1>
	<hr />
	<div class="row" ng-controller="MyCtrl">

	<div class="col-xs-6">
	<h2 class="h4">Input</h2>
	<p ng-repeat="n in inputs track by $index">
	<input ng-change="log()" name="input-{{$index}}" ng-model="myList['value' + ($index+1)]" />
	</p>
	<button class="btn btn-primary" ng-click="add()">
	Add One
	</button>
	</div>

	<div class="col-xs-6">
	<h2 class="h4">Result</h2>
	<table class="table">
	<tr class="active">
	<td>Key</td>
	<td>Value</td>
	</tr>
	<tr ng-repeat="(k, v) in myList">
	<td>{{k}}</td>
	<td>{{v}}</td>
	</tr>
	</table>
	</div>

	</div>
	</div>
	</body>
	</html>