<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script data-require="angular-resource@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular-resource.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
<script src="FirstCtrl.js"></script>
</head>
<body ng-app="myModule">
<h1>Form ng-disabled and Field ng-readonly</h1>
<div ng-controller="FirstCtrl as vm">
<pre>{{vm | json}}
</pre>
<h2>Disable Form using ng-disabled on fieldset</h2>
<code><fieldset ng-disabled="vm.isFormDisabled"></code>
<div class="checkbox">
<label>
<input type="checkbox" id="inputCheckbox1" ng-model="vm.isFormDisabled">isFormDisabled
</label>
</div>
<form>
<fieldset ng-disabled="vm.isFormDisabled">
<div class="form-group">
<label for="myInput">Input prop:</label>
<input type="text" class="form-control" id="myInput" ng-model="vm.prop" />
</div>
<div class="form-group">
<label for="myInput">Input prop2:</label>
<input type="text" class="form-control" id="myInput" ng-model="vm.prop2" />
</div>
</fieldset>
</form>
<h2>Readonly Field using ng-readonly</h2>
<code><input ng-readonly="vm.isFieldReadonly"></code>
<div class="checkbox">
<label>
<input type="checkbox" id="inputCheckbox1" ng-model="vm.isFieldReadonly">isFieldReadonly
</label>
</div>
<form>
<fieldset>
<div class="form-group">
<label for="myInput">Input prop:</label>
<input ng-readonly="vm.isFieldReadonly" type="text" class="form-control" id="myInput" ng-model="vm.prop" />
</div>
<div class="form-group">
<label for="myInput">Input prop2:</label>
<input ng-readonly="vm.isFieldReadonly" type="text" class="form-control" id="myInput" ng-model="vm.prop2" />
</div>
</fieldset>
</form>
</div>
</body>
</html>
/* Styles go here */
(function () {
'use strict';
angular.module('myModule', ['myModule.services', 'myModule.controllers', 'myModule.directives']);
angular.module('myModule.directives', []);
angular.module('myModule.controllers', []);
// ngResource - an external dependency
angular.module('myModule.services', ['ngResource']);
})();
(function() {
'use strict';
angular.module("myModule.controllers").controller("FirstCtrl", FirstCtrl);
FirstCtrl.$inject = ['$location', '$http', '$timeout'];
/* jshint validthis: true */
function FirstCtrl($location, $http, $timeout) {
var vm = this;
vm.prop = "hello world";
vm.prop2 = "hello world 2";
vm.isFormDisabled = true;
vm.isFieldReadonly = true;
}
})();