<!DOCTYPE html>
<html ng-app="myApp">
<head>
<!-- 見た目用にBootstrapを使う -->
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- AngularJS 1.5を公式サイトから引っ張ってくる -->
<script src="//code.angularjs.org/1.5.7/angular.min.js"></script>
<!-- ↓↓↓自分で作ったJavaScriptはここから↓↓↓ -->
<script src="app.js"></script>
</head>
<body class="container">
<div ng-controller="AppController">
<div>
<h1>登録フォーム</h1>
<form ng-submit="submit()">
<div class="form-group">
<label for="username">ユーザー名</label>
<input type="text" class="form-control" id="username" placeholder="twitterのユーザー名を入力" ng-model="username">
</div>
<button type="submit" class="btn btn-primary">登録</button>
</form>
</div>
<hr>
<div>
<h1>ユーザー一覧</h1>
<span ng-if="users.length === 0">ユーザーが一人も登録されていません</span>
<ul>
<li style="padding: 5px" ng-repeat="user in users">
<div>
<a href="{{user.url}}" target="_blank">{{user.username}}</a>
<button type="button" class="btn btn-xs btn-danger" ng-click="deleteUser($index)">x</button>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
angular.module('myApp', [])
.controller('AppController', function($scope) {
// 入力されたユーザー名を保持
$scope.username = '';
// ユーザー一覧（空の配列で初期化）
$scope.users = [];
// 登録を押されたときの関数
$scope.submit = function() {
// 空だったら何もしない
if (!$scope.username) return;
// 新しいユーザーをユーザー一覧に登録する
$scope.users.push({
username: $scope.username,
url: '//twitter.com/' + $scope.username
});
// 登録完了したらINPUTを空にしておく
$scope.username = '';
};
// ユーザー一覧からユーザーを削除
$scope.deleteUser = function(index) {
$scope.users.splice(index, 1);
};
});
/* Styles go here */