angular.module('sampleApp', []);
<!DOCTYPE html>
<html ng-app="sampleApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link href="style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="main.js"></script>
<script src="app.component.js"></script>
</head>
<body>
<div class="pageheader">
<h1>ngModel</h1>
<p class="lead">Using ngModel in an Angular 1.x application</p>
</div>
<div class="container">
<my-app>
Loading...
</my-app>
</div>
</body>
</html>
.pageheader {
padding: 2rem 15px;
color: #cdbfe3;
background-color: #563d7c;
padding-top: 2rem;
padding-bottom: 2rem;
padding-left: 3rem;
margin-bottom: 2rem;
text-align: left;
}
.highlight {
padding: 1rem;
margin: 1rem -15px;
background-color: #f7f7f9;
}
function AppComponentCtrl() {
this.myModel = {
username: 'poweruser',
items: [
{ id: 1, label: 'Item One' },
{ id: 2, label: 'Item Two' },
{ id: 3, label: 'Item Three' }
],
selectedItem: null,
selectedColor: 'red',
isChecked: true
}
// Pre-select item
this.myModel.selectedItem = this.myModel.items[0];
}
var AppComponent = {
bindings: {},
templateUrl: 'app.component.html',
controller: AppComponentCtrl
}
angular
.module('sampleApp')
.component('myApp', AppComponent);
<div class="row">
<div class="col-sm-6">
<form name="myForm" novalidate>
<div class="form-group">
<label for="exampleInput">Username</label>
<input type="input" name="username" ng-model="$ctrl.myModel.username" required class="form-control" id="exampleInput" placeholder="Username">
</div>
<div class="form-group">
<label for="exampleSelect">Example select</label>
<select ng-options="item as item.label for item in $ctrl.myModel.items" ng-model="$ctrl.myModel.selectedItem" class="form-control" id="exampleSelect">
</select>
</div>
<fieldset class="form-group">
<legend>Radio buttons</legend>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" ng-model="$ctrl.myModel.selectedColor" name="optionsRadios" value="red"> Red
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" ng-model="$ctrl.myModel.selectedColor" name="optionsRadios" value="green"> Green
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" ng-model="$ctrl.myModel.selectedColor" name="optionsRadios" value="blue"> Blue
</label>
</div>
</fieldset>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" ng-model="$ctrl.myModel.isChecked" class="form-check-input"> Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col-sm-6">
<pre class="highlight">{{$ctrl.myModel | json}}</pre>
<pre class="highlight">{{myForm | json}}</pre>
</div>
</div>