KimiEatsCode
9/5/2016 - 1:07 AM
From https://slack-files.com/files-pri-safe/T03Q59F9G-F27UPF42H/-.html?c=1472875650-35d4a380417b2f065cf63071342646159cc8e2f2
<!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title>Name Badge Thing</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="MainController">
<div class="container">
<div class="row">
<div class="col-xs-12 header-div"></div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="row">
<img ng-src="{{myImg}}">
<div class="col-xs-12 col-md-6">
<input type="text" ng-model="user.firstName" placeholder="First Name" ng-change="checkEmpty(user)">
</div>
<div class="col-xs-12 col-md-6">
<input type="text" ng-model="user.lastName" placeholder="Last Name" ng-change="checkEmpty(user)">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">
<input type="text" ng-model="user.email" placeholder="Email" ng-change="checkEmpty(user)">
</div>
<div class="col-xs-12 col-md-6">
<input type="text" ng-model="user.birthPlace" placeholder="Place of Birth" ng-change="checkEmpty(user)">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">
<input type="tel" ng-model="user.phone" placeholder="Phone Number" ng-change="checkEmpty(user); checkNumber(user)">
</div>
<div class="col-xs-12 col-md-6">
<input type="text" ng-model="user.food" placeholder="Favorite Food" ng-change="checkEmpty(user)">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<textarea type="text" ng-model="user.comments" placeholder="Tell Us About Yourself" rows="5" cols="40" ng-change="checkEmpty(user)"></textarea>
</div>
</div>
<button class="btn" ng-click="submitUser(user)" ng-disabled="isEmpty">Submit</button>
</div>
</div>
<div class="row">
<div class="col-xs-12 panel panel-primary" ng-repeat="person in userArray">
<div class="col-xs-12 panel-heading">
<h1>Badge: </h1>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-md-6">
<h3>Name: {{person.firstName}} {{person.lastName}}</h3>
</div>
<div class="col-xs-12 col-md-6">
<h3>Phone: {{person.phone}}</h3>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">
<h3>Place of Birth: {{person.birthPlace}}</h3>
</div>
<div class="col-xs-12 col-md-6">
<h3>Favorite Food: {{person.food}}</h3>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">
<h3>Email: {{person.email}}</h3>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<p>{{person.comments}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="script.js"></script>
</body>
</html>
var app = angular.module("MyApp", []);
app.controller("MainController", ["$scope", function ($scope) {
$scope.userArray = [];
$scope.isEmpty = true;
$scope.submitUser = function (user) {
console.log(user);
var allowSubmit = true;
for (var key in user) {
if (user[key].length < 3) {
console.log(key + ' is not long enough. Must be at least 3 characters');
allowSubmit = false;
}
}
if(allowSubmit) {
$scope.userArray.push(user);
$scope.user = {};
}
}
$scope.checkEmpty = function(user) {
var empty = false;
for(var key in user) {
if(!user[key].length) {
empty = true;
}
}
if(!empty && Object.keys(user).length === 7) {
$scope.isEmpty = false;
}else {
$scope.isEmpty = true;
}
}
$scope.checkNumber = function(num){
if(/[^0-9]/g.test(num.phone)) {
$scope.user.phone = '';
}
if(num.phone.length >= 10) {
$scope.user.phone = num.phone.slice(0, 10);
}
}
}]);