zhmz1326/index.html

## index.html
<!DOCTYPE html>
<html lang="js" ng-app="testApp">
<head>
  <meta charset="utf-8">
  <title>Angular Practice</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
  <script src="myscript.js"></script>
  <style>
    .even {
      background: #ccc;
    }

    .odd {
      background: red;
    }
  </style>
</head>
<body>
  <h1>AngularJSの練習</h1>
  <!--
  lesson2
  <input type="text" ng-model="name">
  <p>こんにちは！{{name}}</p>
  <p>こんにちは！{{5 * 3}}</p>]
  -->
  <!--
  lesson3
  <li ng-repeat="user in mainCtrl.users | limitTo:50 | orderBy: '-score' | filter:query">
  -->
  <!--
  lesson4-7

  <div ng-controller="mainCtrl">
    <p><input type="text" ng-model="query.name"></p>
    <p>{{users.length}} users.</p>
    <ul>
        <li ng-repeat="user in users | filter:query"
          ng-class-even="'even'" ng-class-odd="'odd'" ng-controller='userItemCtrl'>
          {{$index+1}} {{$first}} {{$middle}} {{$last}} {{user.name | uppercase }} {{user.score | number: 4}}
          <button ng-click="increment()">+1</button>
        </li>
    </ul>
    <p>{{25 * 500 | number}}</p>
    <p>{{25 * 500 | currency}}</p>
    <p>{{mainCtrl.today | date: 'yyyy-MM-dd'}}</p>
  </div>

  -->

  <!--
  lesson8
  -->
  <div ng-controller="mainCtrl">
  <form novalidate name="myForm" ng-submit="addUser()">
    <p>
      Name: <input type="text" name="name" ng-model="user.name" required ng-minlength="5" ng-maxlength="8">
      <span ng-show="myForm.name.$error.required">Required!</span>
      <span ng-show="myForm.name.$error.minlength">Too short!</span>
      <span ng-show="myForm.name.$error.maxlength">Too long!</span>
    </p>
      <p>
        Score: <input type="number" name="score" ng-model="user.score">
      </p>
        <p>
          Email: <input type="email" name="email" ng-model="user.email">
          <span ng-show="myForm.email.$error.email">Not valid email!</span>
        </p>
          <p>
            Url: <input type="url" name="url" ng-model="user.url">
            <span ng-show="myForm.url.$error.url">Not valid url!</span>
          </p>

    <p>18+:<input type="checkbox" ng-model="user.adult" ng-true-value="'adult'" ng-false-value="'child'" /></p>
    <p>
      Phone:
      <input type="radio" ng-model="user.phone" value="iPhone">iPhone
      <input type="radio" ng-model="user.phone" value="Android">Android
    </p>
    <p>
      Memo:
      <textarea ng-model="user.memo" ng-maxlength="140"></textarea>{{140-user.memo.length}}
    </p>

    <p>
      Color:
      <select ng-model="user.color"
        ng-options="'label:' + color for color in ['red', 'blue', 'pink']"
        ng-init="user.color = 'red'"></select>
    </p>
    <p><input type="submit" value="add"></p>
  </form>
  <pre>{{user|json}}</pre>
  </div>


</body>
</html>

## myscript.js
var app = angular.module('testApp', []);
app.controller('mainCtrl', function($scope) {
    $scope.addUser = function() {

    }
    // var scope = this;
    $scope.users = [
      {"name": "taguchi", "score": 52.22},
      {"name": "tanaka", "score": 38.22},
      {"name": "yamada", "score": 11.11},
        {"name": "taguchi2", "score": 92.4},
        {"name": "tanaka2", "score": 88.6},
        {"name": "yamada2", "score": 1.4},
          {"name": "taguchi3", "score": 72.22},
          {"name": "tanaka3", "score": 28.22},
          {"name": "yamada3", "score": 61.11},
            {"name": "taguchi4", "score": 55.22},
            {"name": "tanaka4", "score": 33.22},
            {"name": "yamada4", "score": 21.11},
    ];

    $scope.today = new Date();
  });

app.controller('userItemCtrl', function($scope) {
    $scope.increment = function() {
      // alert('hello');
      $scope.user.score++;
    }
  });
	<!DOCTYPE html>
	<html lang="js" ng-app="testApp">
	<head>
	<meta charset="utf-8">
	<title>Angular Practice</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
	<script src="myscript.js"></script>
	<style>
	.even {
	background: #ccc;
	}

	.odd {
	background: red;
	}
	</style>
	</head>
	<body>
	<h1>AngularJSの練習</h1>
	<!--
	lesson2
	<input type="text" ng-model="name">
	<p>こんにちは！{{name}}</p>
	<p>こんにちは！{{5 * 3}}</p>]
	-->
	<!--
	lesson3
	<li ng-repeat="user in mainCtrl.users \| limitTo:50 \| orderBy: '-score' \| filter:query">
	-->
	<!--
	lesson4-7

	<div ng-controller="mainCtrl">
	<p><input type="text" ng-model="query.name"></p>
	<p>{{users.length}} users.</p>
	<ul>
	<li ng-repeat="user in users \| filter:query"
	ng-class-even="'even'" ng-class-odd="'odd'" ng-controller='userItemCtrl'>
	{{$index+1}} {{$first}} {{$middle}} {{$last}} {{user.name \| uppercase }} {{user.score \| number: 4}}
	<button ng-click="increment()">+1</button>
	</li>
	</ul>
	<p>{{25 * 500 \| number}}</p>
	<p>{{25 * 500 \| currency}}</p>
	<p>{{mainCtrl.today \| date: 'yyyy-MM-dd'}}</p>
	</div>

	-->

	<!--
	lesson8
	-->
	<div ng-controller="mainCtrl">
	<form novalidate name="myForm" ng-submit="addUser()">
	<p>
	Name: <input type="text" name="name" ng-model="user.name" required ng-minlength="5" ng-maxlength="8">
	<span ng-show="myForm.name.$error.required">Required!</span>
	<span ng-show="myForm.name.$error.minlength">Too short!</span>
	<span ng-show="myForm.name.$error.maxlength">Too long!</span>
	</p>
	<p>
	Score: <input type="number" name="score" ng-model="user.score">
	</p>
	<p>
	Email: <input type="email" name="email" ng-model="user.email">
	<span ng-show="myForm.email.$error.email">Not valid email!</span>
	</p>
	<p>
	Url: <input type="url" name="url" ng-model="user.url">
	<span ng-show="myForm.url.$error.url">Not valid url!</span>
	</p>

	<p>18+:<input type="checkbox" ng-model="user.adult" ng-true-value="'adult'" ng-false-value="'child'" /></p>
	<p>
	Phone:
	<input type="radio" ng-model="user.phone" value="iPhone">iPhone
	<input type="radio" ng-model="user.phone" value="Android">Android
	</p>
	<p>
	Memo:
	<textarea ng-model="user.memo" ng-maxlength="140"></textarea>{{140-user.memo.length}}
	</p>

	<p>
	Color:
	<select ng-model="user.color"
	ng-options="'label:' + color for color in ['red', 'blue', 'pink']"
	ng-init="user.color = 'red'"></select>
	</p>
	<p><input type="submit" value="add"></p>
	</form>
	<pre>{{user\|json}}</pre>
	</div>


	</body>
	</html>
	var app = angular.module('testApp', []);
	app.controller('mainCtrl', function($scope) {
	$scope.addUser = function() {

	}
	// var scope = this;
	$scope.users = [
	{"name": "taguchi", "score": 52.22},
	{"name": "tanaka", "score": 38.22},
	{"name": "yamada", "score": 11.11},
	{"name": "taguchi2", "score": 92.4},
	{"name": "tanaka2", "score": 88.6},
	{"name": "yamada2", "score": 1.4},
	{"name": "taguchi3", "score": 72.22},
	{"name": "tanaka3", "score": 28.22},
	{"name": "yamada3", "score": 61.11},
	{"name": "taguchi4", "score": 55.22},
	{"name": "tanaka4", "score": 33.22},
	{"name": "yamada4", "score": 21.11},
	];

	$scope.today = new Date();
	});

	app.controller('userItemCtrl', function($scope) {
	$scope.increment = function() {
	// alert('hello');
	$scope.user.score++;
	}
	});