44 lines
2.7 KiB
HTML
Executable file
44 lines
2.7 KiB
HTML
Executable file
<a href="http://github.com/angular/angular.js/tree/v1.2.0rc1/src/ng/directive/input.js#L1108" class="view-source btn btn-action"><i class="icon-zoom-in"> </i> View source</a><a href="http://github.com/angular/angular.js/edit/master/src/ng/directive/input.js" class="improve-docs btn btn-primary"><i class="icon-edit"> </i> Improve this doc</a><h1><code ng:non-bindable="">ngModel</code>
|
|
<div><span class="hint">directive in module <code ng:non-bindable="">ng</code>
|
|
</span>
|
|
</div>
|
|
</h1>
|
|
<div><h2 id="Description">Description</h2>
|
|
<div class="description"><div class="ng-directive-page ng-directive-ngmodel-page"><p>Is a directive that tells Angular to do two-way data binding. It works together with <code>input</code>,
|
|
<code>select</code>, <code>textarea</code> and even custom form controls that use <a href="api/ng.directive:ngModel.NgModelController"><code>NgModelController</code></a> exposed by this directive.</p>
|
|
<p><code>ngModel</code> is responsible for:</p>
|
|
<ul>
|
|
<li>binding the view into the model, which other directives such as <code>input</code>, <code>textarea</code> or <code>select</code>
|
|
require,</li>
|
|
<li>providing validation behavior (i.e. required, number, email, url),</li>
|
|
<li>keeping state of the control (valid/invalid, dirty/pristine, validation errors),</li>
|
|
<li>setting related css class onto the element (<code>ng-valid</code>, <code>ng-invalid</code>, <code>ng-dirty</code>, <code>ng-pristine</code>),</li>
|
|
<li>register the control with parent <a href="api/ng.directive:form"><code>form</code></a>.</li>
|
|
</ul>
|
|
<p>Note: <code>ngModel</code> will try to bind to the property given by evaluating the expression on the
|
|
current scope. If the property doesn't already exist on this scope, it will be created
|
|
implicitly and added to the scope.</p>
|
|
<p>For basic examples, how to use <code>ngModel</code>, see:</p>
|
|
<ul>
|
|
<li><a href="api/ng.directive:input"><code>input</code></a><ul>
|
|
<li><a href="api/ng.directive:input.text"><code>text</code></a></li>
|
|
<li><a href="api/ng.directive:input.checkbox"><code>checkbox</code></a></li>
|
|
<li><a href="api/ng.directive:input.radio"><code>radio</code></a></li>
|
|
<li><a href="api/ng.directive:input.number"><code>number</code></a></li>
|
|
<li><a href="api/ng.directive:input.email"><code>email</code></a></li>
|
|
<li><a href="api/ng.directive:input.url"><code>url</code></a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="api/ng.directive:select"><code>select</code></a></li>
|
|
<li><a href="api/ng.directive:textarea"><code>textarea</code></a></li>
|
|
</ul>
|
|
</div></div>
|
|
<h2 id="Usage">Usage</h2>
|
|
<div class="usage">as attribute<pre class="prettyprint linenums"><input ng-model>
|
|
...
|
|
</input></pre>
|
|
as class<pre class="prettyprint linenums"><input class="ng-model">
|
|
...
|
|
</input></pre>
|
|
</div>
|
|
</div>
|