<!DOCTYPE html>
<html ng-app="app" >
<head>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-rc.0/angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="TestCtrl">
<form name="fm" novalidate >
<ng-form name="itemFm" >
<input
name="inputCd"
type="text" ng-model="data.cd"
ng-class="{'has-error':itemFm.inputCd.$invalid}"
required/>
<input
name="inputNm"
type="text" ng-model="data.nm"
ng-class="{'has-error':itemFm.inputNm.$invalid}"
ng-model-options="{ updateOn: 'blur' }"
required/>
<button ng-disabled="itemFm.$invalid">{{$index}}γΌγγ</button>
</ng-form>
<br />
<input
name="inputHoge"
type="text" ng-model="data.hoge"
ng-class="{'has-error':fm.inputHoge.$invalid}"
required/>
<button ng-disabled="fm.$invalid">send</button>
</form>
{{data}}
</div>
</body>
</html>
(function(){
"use strict";
// create controllers
angular.module("controllers",[]);
angular.module("controllers").
controller("TestCtrl", function( $scope ){
$scope.data = {
cd:1,
nm:"angular",
hoge:"fuga"
};
});
// application boot!
angular.module("app",["controllers"]);
})();
html,body {
background-color:white;
}
body{
padding: 8px;
}
input[type="text"]{
font-size: 1.4rem;
border-radius:4px;
}
ul {
padding: 4px;
}
li {
padding:4px;
list-style: none;
margin:4px;
border-bottom: 1px solid rgba( 100, 100, 100, 0.4);
}
.has-error{
background-color:lightyellow;
border-color: red;
}