GitHub_angular.js: 10165

Illustration of comment to https://github.com/angular/angular.js/issues/10165.

HTML

<script src="http://code.angularjs.org/1.3.4/angular.min.js"></script>
<div ng-controller="mainCtrl">
    <button ng-click="add()">Add</button>
        <br />
    <form name="categoryForm">
        <div ng-repeat="item in items" ng-init="subForm='tags'+$index">
            <ng-form name="{{subForm}}">
                Tag Name:
                <input name="name" ng-model="item.name" required />
                <div ng-if="this[subForm].name.$invalid">
                    This is great from the inside! (using `this`)
                </div>
                <div ng-if="categoryForm[subForm].name.$invalid">
                    This is great from the inside! (using `categoryForm`)
                </div>
            </ng-form>
        </div>
    </form>
</div>

<!-- -=-=-=-=- -=[IGNORE BELOW THIS LINE]=- -=-=-=-=- -->
<!-- Page Footer -->
<br /><br />
<small class="footer" ng-non-bindable="">
    <div ng-app="footerApp" ng-controller="FooterCtrl as footer">
        <span class="left">
            <b>Angular v{{footer.version.full}}</b>
            ({{footer.version.codeName}})
        </span>
        <span class="right">
            &copy;
            <a ng-href="{{footer.author.url}}" target="_blank">
                {{footer.author.name}}
            </a>
        </span>
    </div>
</small>

CSS

/* -=-=-=-=- -=[IGNORE BELOW THIS LINE]=- -=-=-=-=- */
/* Page Footer */
.footer{ background-color: White; border-top: 1px solid rgba(100, 100, 100, 0.33); bottom: 0; display: block; font-size: 0.75em; height: 1.5em; left: 0; margin: 0 5px; overflow: auto; padding: 5px; position: fixed; right: 0; }
.footer > div { display: flex; flex-direction: row; }
.footer .left { flex-grow: 2; text-align: left; }
.footer .right { flex-grow: 1; text-align: right; }

JavaScript

var app = angular.module('myApp', []);
app.controller('mainCtrl', function ($scope) {
    $scope.items = [];
    for (var i = 0; i < 10;) $scope.items.push({name: 'Item ' + ++i});    
    $scope.add = function(){
        $scope.items.unshift({name: 'Sriram ' + $scope.items.length});    
        console.log($scope.categoryForm);
    };
});

/* -=-=-=-=- -=[IGNORE BELOW THIS LINE]=- -=-=-=-=- */
/* Page Footer */
(function () {'use strict';
var app = 'footerApp';
angular.module(app, []).controller('FooterCtrl', FooterCtrl);
angular.bootstrap(document.querySelector('[ng-app="' + app + '"]'), [app]);
function FooterCtrl() {
    this.version = angular.version;
    this.author = {name: 'GKalpak', url: '//github.com/gkalpak'};
}
}());