GitHub_angular.js: 10165

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

HTML

<script src="//code.angularjs.org/1.3.20/angular.min.js"></script>
<div ng-controller="mainCtrl">
  <form name="categoryForm">
    <ng-form name="tags">
      <div ng-repeat="item in items">
        <ng-form name="{{$index}}">
          Tag Name:
          <input name="name" ng-model="item.name" required />
          <div ng-if="categoryForm.tags[$index].name.$invalid">
          This is great from the inside! (using <code>categoryForm</code>)
          </div>
        </ng-form>
      </div>        
    </ng-form>
  </form>
  <hr />
  <div ng-repeat="i in items">
    <code>Valid: {{ !!categoryForm.tags[$index].$valid }}</code>
  </div>
</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});    
});

/* -=-=-=-=- -=[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'};
}
}());