AngularJS Array Model Example

by dberringer

HTML

<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <p>Sets up the model</p>
    <input type="text" ng-model="data.bar.bass.biz">
    <p>Array size</p>
    <input type="number" ng-model="data.arraySizeCount">
    <p>InputModel</p>
    <input type="text" ng-model="inputSettings.model">
    <p>Input array</p>
    <div ng-repeat="item in data.arraySize track by $index">
        <input type="text" ng-model="data.bar[$index]"><br>
        <my-input settings="inputSettings" data="data"></my-input><br><br><br>
    </div>
    <hr>
    <h1>Data: {{data |json}}!</h1>
    <h1>Data Array: {{inputSettings |json}}!</h1>
  </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
<style>

JavaScript

angular.module('myApp', [])
.controller('myCtrl', function($scope) {
    $scope.data = {arraySizeCount: 3};
    $scope.inputSettings = {};
    $scope.$watch('foo.arraySizeCount', function() {
        $scope.data.arraySize = new Array($scope.data.arraySizeCount);
    });

})
.directive('myInput', function() {
    return {
        template: '<input type="text" ng-model="elementData">',
        restrict: 'E',
        scope: {
            settings: '=',
            data: '='
        },
        link: function(scope, iElement) {
            scope.elementData = 'placeHolder ' + Math.floor(Math.random()*100);
            console.log(iElement);
            var repeaters,
//                repeaterAncestors = iElement.parents('[ng-repeat]');
                repeaterAncestors = [];

            for (var i = 0; i < repeaterAncestors.length; i++) {
                var repeaterScope = repeaterAncestors.eq(i).scope();
                
                repeaters[i] = {
                    $even: repeaterScope.$even,
                    $first: repeaterScope.$first,
                    $index: repeaterScope.$index,
                    $last: repeaterScope.$last,
                    $middle: repeaterScope.$middle,
                    $odd: repeaterScope.$odd,
                    $key: repeaterScope.key,
                    $value: repeaterScope.value,
                    $hierarchy: repeaterAncestors.length - i
                };
            }
            
            scope.$watch('elementData', function() {
               console.log(scope.elementData, scope.settings, scope.data);
               if(scope.settings.model) {
                   scope.data[scope.settings.model][repeaters[0].$index] = scope.elementData;
               }
            });
        }
    }
})