<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap@3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="angular.js@1.2.12" data-semver="1.2.12" src="http://code.angularjs.org/1.2.12/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="formDemo" ng-controller="FormCtrl" class="container">
<div class="row">
<div class="col-md-12">
<form name="listForm" ng-submit="saveList()" novalidate>
<div class="row">
<div class="form-group">
<label for="list-title">List title</label>
<input id="list-title" type="text" ng-model="list.title" class="form-control" placeholder="Groceries" required />
</div>
</div>
<hr />
<div class="row">
<b>List items</b>
<ul ng-form="itemsForm" class="list-unstyled">
<li ng-repeat="item in list.items" ng-form="itemForm">
<div class="form-group">
<label for="itemText" class="hidden">List item</label>
<input name="itemText" type="text" ng-model="item.text" class="form-control" placeholder="Buy tomatoes" required />
<ul ng-show="itemForm.$invalid && itemForm.$dirty">
<li ng-show="itemForm.itemText.$error.required">This field is required.</li>
</ul>
</div>
</li>
</ul>
<button ng-click="addElement()" class="btn btn-default pull-right" ng-disabled="itemsForm.$invalid">Add an element</button>
</div>
<hr />
<div class="row">
<input type="submit" class="btn btn-success pull-right" value="Save list" ng-disabled="listForm.$invalid">
</div>
</form>
</div>
</div>
</body>
</html>
angular.module('formDemo', [])
.controller('FormCtrl', function ($scope) {
$scope.list = {
name: '',
items: [{}]
};
$scope.addElement = function() {
$scope.list.items.push({});
};
$scope.saveList = function() {
alert('This is a dummy button but let\'s say the list has been saved !');
};
});
/* Styles go here */