Skip to content

Commit d40749c

Browse files
petebacondarwinpetebacondarwin
committed
docs(input): update example to use ngModel best practices
Update the rest of the directives to use object properties for models. Closes angular#10851
1 parent e13224b commit d40749c

File tree

1 file changed

+74
-54
lines changed

1 file changed

+74
-54
lines changed

‎src/ng/directive/input.js‎

Lines changed: 74 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -61,29 +61,31 @@ var inputType = {
6161
<script>
6262
angular.module('textInputExample', [])
6363
.controller('ExampleController', ['$scope', function($scope) {
64-
$scope.text = 'guest';
65-
$scope.word = /^\s*\w*\s*$/;
64+
$scope.example = {
65+
text: 'guest',
66+
word: /^\s*\w*\s*$/
67+
};
6668
}]);
6769
</script>
6870
<form name="myForm" ng-controller="ExampleController">
69-
Single word: <input type="text" name="input" ng-model="text"
70-
ng-pattern="word" required ng-trim="false">
71+
Single word: <input type="text" name="input" ng-model="example.text"
72+
ng-pattern="example.word" required ng-trim="false">
7173
<span class="error" ng-show="myForm.input.$error.required">
7274
Required!</span>
7375
<span class="error" ng-show="myForm.input.$error.pattern">
7476
Single word only!</span>
7577
76-
<tt>text = {{text}}</tt><br/>
78+
<tt>text = {{example.text}}</tt><br/>
7779
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
7880
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
7981
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
8082
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
8183
</form>
8284
</file>
8385
<file name="protractor.js" type="protractor">
84-
var text = element(by.binding('text'));
86+
var text = element(by.binding('example.text'));
8587
var valid = element(by.binding('myForm.input.$valid'));
86-
var input = element(by.model('text'));
88+
var input = element(by.model('example.text'));
8789
8890
it('should initialize to model', function() {
8991
expect(text.getText()).toContain('guest');
@@ -145,28 +147,30 @@ var inputType = {
145147
<script>
146148
angular.module('dateInputExample', [])
147149
.controller('DateController', ['$scope', function($scope) {
148-
$scope.value = new Date(2013, 9, 22);
150+
$scope.example = {
151+
value: new Date(2013, 9, 22)
152+
};
149153
}]);
150154
</script>
151155
<form name="myForm" ng-controller="DateController as dateCtrl">
152156
Pick a date in 2013:
153-
<input type="date" id="exampleInput" name="input" ng-model="value"
157+
<input type="date" id="exampleInput" name="input" ng-model="example.value"
154158
placeholder="yyyy-MM-dd" min="2013-01-01" max="2013-12-31" required />
155159
<span class="error" ng-show="myForm.input.$error.required">
156160
Required!</span>
157161
<span class="error" ng-show="myForm.input.$error.date">
158162
Not a valid date!</span>
159-
<tt>value = {{value | date: "yyyy-MM-dd"}}</tt><br/>
163+
<tt>value = {{example.value | date: "yyyy-MM-dd"}}</tt><br/>
160164
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
161165
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
162166
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
163167
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
164168
</form>
165169
</file>
166170
<file name="protractor.js" type="protractor">
167-
var value = element(by.binding('value | date: "yyyy-MM-dd"'));
171+
var value = element(by.binding('example.value | date: "yyyy-MM-dd"'));
168172
var valid = element(by.binding('myForm.input.$valid'));
169-
var input = element(by.model('value'));
173+
var input = element(by.model('example.value'));
170174
171175
// currently protractor/webdriver does not support
172176
// sending keys to all known HTML5 input controls
@@ -236,28 +240,30 @@ var inputType = {
236240
<script>
237241
angular.module('dateExample', [])
238242
.controller('DateController', ['$scope', function($scope) {
239-
$scope.value = new Date(2010, 11, 28, 14, 57);
243+
$scope.example = {
244+
value: new Date(2010, 11, 28, 14, 57)
245+
};
240246
}]);
241247
</script>
242248
<form name="myForm" ng-controller="DateController as dateCtrl">
243249
Pick a date between in 2013:
244-
<input type="datetime-local" id="exampleInput" name="input" ng-model="value"
250+
<input type="datetime-local" id="exampleInput" name="input" ng-model="example.value"
245251
placeholder="yyyy-MM-ddTHH:mm:ss" min="2001-01-01T00:00:00" max="2013-12-31T00:00:00" required />
246252
<span class="error" ng-show="myForm.input.$error.required">
247253
Required!</span>
248254
<span class="error" ng-show="myForm.input.$error.datetimelocal">
249255
Not a valid date!</span>
250-
<tt>value = {{value | date: "yyyy-MM-ddTHH:mm:ss"}}</tt><br/>
256+
<tt>value = {{example.value | date: "yyyy-MM-ddTHH:mm:ss"}}</tt><br/>
251257
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
252258
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
253259
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
254260
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
255261
</form>
256262
</file>
257263
<file name="protractor.js" type="protractor">
258-
var value = element(by.binding('value | date: "yyyy-MM-ddTHH:mm:ss"'));
264+
var value = element(by.binding('example.value | date: "yyyy-MM-ddTHH:mm:ss"'));
259265
var valid = element(by.binding('myForm.input.$valid'));
260-
var input = element(by.model('value'));
266+
var input = element(by.model('example.value'));
261267
262268
// currently protractor/webdriver does not support
263269
// sending keys to all known HTML5 input controls
@@ -328,28 +334,30 @@ var inputType = {
328334
<script>
329335
angular.module('timeExample', [])
330336
.controller('DateController', ['$scope', function($scope) {
331-
$scope.value = new Date(1970, 0, 1, 14, 57, 0);
337+
$scope.example = {
338+
value: new Date(1970, 0, 1, 14, 57, 0)
339+
};
332340
}]);
333341
</script>
334342
<form name="myForm" ng-controller="DateController as dateCtrl">
335343
Pick a between 8am and 5pm:
336-
<input type="time" id="exampleInput" name="input" ng-model="value"
344+
<input type="time" id="exampleInput" name="input" ng-model="example.value"
337345
placeholder="HH:mm:ss" min="08:00:00" max="17:00:00" required />
338346
<span class="error" ng-show="myForm.input.$error.required">
339347
Required!</span>
340348
<span class="error" ng-show="myForm.input.$error.time">
341349
Not a valid date!</span>
342-
<tt>value = {{value | date: "HH:mm:ss"}}</tt><br/>
350+
<tt>value = {{example.value | date: "HH:mm:ss"}}</tt><br/>
343351
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
344352
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
345353
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
346354
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
347355
</form>
348356
</file>
349357
<file name="protractor.js" type="protractor">
350-
var value = element(by.binding('value | date: "HH:mm:ss"'));
358+
var value = element(by.binding('example.value | date: "HH:mm:ss"'));
351359
var valid = element(by.binding('myForm.input.$valid'));
352-
var input = element(by.model('value'));
360+
var input = element(by.model('example.value'));
353361
354362
// currently protractor/webdriver does not support
355363
// sending keys to all known HTML5 input controls
@@ -419,28 +427,30 @@ var inputType = {
419427
<script>
420428
angular.module('weekExample', [])
421429
.controller('DateController', ['$scope', function($scope) {
422-
$scope.value = new Date(2013, 0, 3);
430+
$scope.example = {
431+
value: new Date(2013, 0, 3)
432+
};
423433
}]);
424434
</script>
425435
<form name="myForm" ng-controller="DateController as dateCtrl">
426436
Pick a date between in 2013:
427-
<input id="exampleInput" type="week" name="input" ng-model="value"
437+
<input id="exampleInput" type="week" name="input" ng-model="example.value"
428438
placeholder="YYYY-W##" min="2012-W32" max="2013-W52" required />
429439
<span class="error" ng-show="myForm.input.$error.required">
430440
Required!</span>
431441
<span class="error" ng-show="myForm.input.$error.week">
432442
Not a valid date!</span>
433-
<tt>value = {{value | date: "yyyy-Www"}}</tt><br/>
443+
<tt>value = {{example.value | date: "yyyy-Www"}}</tt><br/>
434444
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
435445
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
436446
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
437447
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
438448
</form>
439449
</file>
440450
<file name="protractor.js" type="protractor">
441-
var value = element(by.binding('value | date: "yyyy-Www"'));
451+
var value = element(by.binding('example.value | date: "yyyy-Www"'));
442452
var valid = element(by.binding('myForm.input.$valid'));
443-
var input = element(by.model('value'));
453+
var input = element(by.model('example.value'));
444454
445455
// currently protractor/webdriver does not support
446456
// sending keys to all known HTML5 input controls
@@ -510,28 +520,30 @@ var inputType = {
510520
<script>
511521
angular.module('monthExample', [])
512522
.controller('DateController', ['$scope', function($scope) {
513-
$scope.value = new Date(2013, 9, 1);
523+
$scope.example = {
524+
value: new Date(2013, 9, 1)
525+
};
514526
}]);
515527
</script>
516528
<form name="myForm" ng-controller="DateController as dateCtrl">
517529
Pick a month in 2013:
518-
<input id="exampleInput" type="month" name="input" ng-model="value"
530+
<input id="exampleInput" type="month" name="input" ng-model="example.value"
519531
placeholder="yyyy-MM" min="2013-01" max="2013-12" required />
520532
<span class="error" ng-show="myForm.input.$error.required">
521533
Required!</span>
522534
<span class="error" ng-show="myForm.input.$error.month">
523535
Not a valid month!</span>
524-
<tt>value = {{value | date: "yyyy-MM"}}</tt><br/>
536+
<tt>value = {{example.value | date: "yyyy-MM"}}</tt><br/>
525537
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
526538
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
527539
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
528540
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
529541
</form>
530542
</file>
531543
<file name="protractor.js" type="protractor">
532-
var value = element(by.binding('value | date: "yyyy-MM"'));
544+
var value = element(by.binding('example.value | date: "yyyy-MM"'));
533545
var valid = element(by.binding('myForm.input.$valid'));
534-
var input = element(by.model('value'));
546+
var input = element(by.model('example.value'));
535547
536548
// currently protractor/webdriver does not support
537549
// sending keys to all known HTML5 input controls
@@ -607,27 +619,29 @@ var inputType = {
607619
<script>
608620
angular.module('numberExample', [])
609621
.controller('ExampleController', ['$scope', function($scope) {
610-
$scope.value = 12;
622+
$scope.example = {
623+
value: 12
624+
};
611625
}]);
612626
</script>
613627
<form name="myForm" ng-controller="ExampleController">
614-
Number: <input type="number" name="input" ng-model="value"
628+
Number: <input type="number" name="input" ng-model="example.value"
615629
min="0" max="99" required>
616630
<span class="error" ng-show="myForm.input.$error.required">
617631
Required!</span>
618632
<span class="error" ng-show="myForm.input.$error.number">
619633
Not valid number!</span>
620-
<tt>value = {{value}}</tt><br/>
634+
<tt>value = {{example.value}}</tt><br/>
621635
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
622636
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
623637
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
624638
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
625639
</form>
626640
</file>
627641
<file name="protractor.js" type="protractor">
628-
var value = element(by.binding('value'));
642+
var value = element(by.binding('example.value'));
629643
var valid = element(by.binding('myForm.input.$valid'));
630-
var input = element(by.model('value'));
644+
var input = element(by.model('example.value'));
631645
632646
it('should initialize to model', function() {
633647
expect(value.getText()).toContain('12');
@@ -695,16 +709,18 @@ var inputType = {
695709
<script>
696710
angular.module('urlExample', [])
697711
.controller('ExampleController', ['$scope', function($scope) {
698-
$scope.text = 'http://google.com';
712+
$scope.url = {
713+
text: 'http://google.com'
714+
};
699715
}]);
700716
</script>
701717
<form name="myForm" ng-controller="ExampleController">
702-
URL: <input type="url" name="input" ng-model="text" required>
718+
URL: <input type="url" name="input" ng-model="url.text" required>
703719
<span class="error" ng-show="myForm.input.$error.required">
704720
Required!</span>
705721
<span class="error" ng-show="myForm.input.$error.url">
706722
Not valid url!</span>
707-
<tt>text = {{text}}</tt><br/>
723+
<tt>text = {{url.text}}</tt><br/>
708724
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
709725
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
710726
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
@@ -713,9 +729,9 @@ var inputType = {
713729
</form>
714730
</file>
715731
<file name="protractor.js" type="protractor">
716-
var text = element(by.binding('text'));
732+
var text = element(by.binding('url.text'));
717733
var valid = element(by.binding('myForm.input.$valid'));
718-
var input = element(by.model('text'));
734+
var input = element(by.model('url.text'));
719735
720736
it('should initialize to model', function() {
721737
expect(text.getText()).toContain('http://google.com');
@@ -784,16 +800,18 @@ var inputType = {
784800
<script>
785801
angular.module('emailExample', [])
786802
.controller('ExampleController', ['$scope', function($scope) {
787-
$scope.text = 'me@example.com';
803+
$scope.email = {
804+
text: 'me@example.com'
805+
};
788806
}]);
789807
</script>
790808
<form name="myForm" ng-controller="ExampleController">
791-
Email: <input type="email" name="input" ng-model="text" required>
809+
Email: <input type="email" name="input" ng-model="email.text" required>
792810
<span class="error" ng-show="myForm.input.$error.required">
793811
Required!</span>
794812
<span class="error" ng-show="myForm.input.$error.email">
795813
Not valid email!</span>
796-
<tt>text = {{text}}</tt><br/>
814+
<tt>text = {{email.text}}</tt><br/>
797815
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
798816
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
799817
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
@@ -802,9 +820,9 @@ var inputType = {
802820
</form>
803821
</file>
804822
<file name="protractor.js" type="protractor">
805-
var text = element(by.binding('text'));
823+
var text = element(by.binding('email.text'));
806824
var valid = element(by.binding('myForm.input.$valid'));
807-
var input = element(by.model('text'));
825+
var input = element(by.model('email.text'));
808826
809827
it('should initialize to model', function() {
810828
expect(text.getText()).toContain('me@example.com');
@@ -851,28 +869,30 @@ var inputType = {
851869
<script>
852870
angular.module('radioExample', [])
853871
.controller('ExampleController', ['$scope', function($scope) {
854-
$scope.color = 'blue';
872+
$scope.color = {
873+
name: 'blue'
874+
};
855875
$scope.specialValue = {
856876
"id": "12345",
857877
"value": "green"
858878
};
859879
}]);
860880
</script>
861881
<form name="myForm" ng-controller="ExampleController">
862-
<input type="radio" ng-model="color" value="red"> Red <br/>
863-
<input type="radio" ng-model="color" ng-value="specialValue"> Green <br/>
864-
<input type="radio" ng-model="color" value="blue"> Blue <br/>
865-
<tt>color = {{color | json}}</tt><br/>
882+
<input type="radio" ng-model="color.name" value="red"> Red <br/>
883+
<input type="radio" ng-model="color.name" ng-value="specialValue"> Green <br/>
884+
<input type="radio" ng-model="color.name" value="blue"> Blue <br/>
885+
<tt>color = {{color.name | json}}</tt><br/>
866886
</form>
867887
Note that `ng-value="specialValue"` sets radio item's value to be the value of `$scope.specialValue`.
868888
</file>
869889
<file name="protractor.js" type="protractor">
870890
it('should change state', function() {
871-
var color = element(by.binding('color'));
891+
var color = element(by.binding('color.name'));
872892
873893
expect(color.getText()).toContain('blue');
874894
875-
element.all(by.model('color')).get(0).click();
895+
element.all(by.model('color.name')).get(0).click();
876896
877897
expect(color.getText()).toContain('red');
878898
});

0 commit comments

Comments
 (0)