Angular.js: Angular 1.6์€`<select>์˜`ng-model` ๊ฐ’</select>

์— ๋งŒ๋“  2017๋…„ 01์›” 20์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: angular/angular.js

์ฐธ๊ณ  : ์ง€์› ์งˆ๋ฌธ์€ https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#question ์ฑ„๋„ ์ค‘ ํ•˜๋‚˜๋ฅผ ์‚ฌ์šฉ

๊ธฐ๋Šฅ ์„ ์š”์ฒญํ•˜๊ฑฐ๋‚˜ ๋ฒ„๊ทธ๋ฅผ๋ณด๊ณ  ํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?
๊ณค์ถฉ

ํ˜„์žฌ ํ–‰๋™์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?
Angular 1.6์€ <option> s ๋ชฉ๋ก์ด ๋ณ€๊ฒฝ๋˜๋ฉด <select> s ng-model ๊ฐ’์„ ์žฌ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค ( "๊ธฐํƒ€ ์ •๋ณด"์„น์…˜ ์ฐธ์กฐ).
Angular 1.5๋Š” ๊ทธ๊ฒƒ์„ ๋ณด์กดํ•ฉ๋‹ˆ๋‹ค.

ํ˜„์žฌ ๋™์ž‘์ด ๋ฒ„๊ทธ ์ธ ๊ฒฝ์šฐ ์žฌํ˜„ ๋‹จ๊ณ„๋ฅผ ์ œ๊ณตํ•˜๊ณ  ๊ฐ€๋Šฅํ•˜๋ฉด https://plnkr.co ๋˜๋Š” ์ด์™€ ์œ ์‚ฌํ•œ ๋ฐฉ์‹ (ํ…œํ”Œ๋ฆฟ : http://plnkr.co/edit/tpl:yBpEi4)์„ ํ†ตํ•ด ๋ฌธ์ œ์— ๋Œ€ํ•œ ์ตœ์†Œํ•œ์˜ ๋ฐ๋ชจ๋ฅผ ์ œ๊ณตํ•˜์‹ญ์‹œ์˜ค. .
Angular 1.6 : https://plnkr.co/edit/wHc4rzy7x9PAEqQLfVQT?p=preview
Angular 1.5.11 : https://plnkr.co/edit/e0LVMEtGP2j4JxNf8lsp?p=preview

์˜ˆ์ƒ๋˜๋Š” ๋™์ž‘์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?
ng-model ๋Š” ๊ทธ ๊ฐ€์น˜๋ฅผ ๋ณด์กดํ•ฉ๋‹ˆ๋‹ค.

ํ–‰๋™์„ ๋ณ€๊ฒฝํ•˜๋Š” ๋™๊ธฐ / ์‚ฌ์šฉ ์‚ฌ๋ก€๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?
์ •ํ™•ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์–ด๋–ค ๋ฒ„์ „์˜ Angular์™€ ์–ด๋–ค ๋ธŒ๋ผ์šฐ์ € / OS๊ฐ€์ด ๋ฌธ์ œ์˜ ์˜ํ–ฅ์„ ๋ฐ›์Šต๋‹ˆ๊นŒ? ์ตœ์‹  ์•ˆ์ • ๋ฒ„์ „ ๋ฐ ์Šค๋ƒ… ์ƒท (https://code.angularjs.org/snapshot/) ๋ฒ„์ „์œผ๋กœ๋„ ํ…Œ์ŠคํŠธํ•˜์‹ญ์‹œ์˜ค.
Angular 1.6.x๊ฐ€ ์˜ํ–ฅ์„๋ฐ›์Šต๋‹ˆ๋‹ค.
Angular 1.5.x๋Š” ๊ทธ๋ ‡์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๊ธฐํƒ€ ์ •๋ณด (์˜ˆ : ์Šคํƒ ์ถ”์ , ๊ด€๋ จ ๋ฌธ์ œ, ํ•ด๊ฒฐ ๋ฐฉ๋ฒ• ์ œ์•ˆ)
๋ฌธ์ œ๋Š” Angular 1.6์ด options ๊ฐ’์ด ์•„๋‹ˆ๋ผ ๋ชจ๋ธ๋ณ„๋กœ ์˜ต์…˜์„ ์ถ”์ ํ•œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์œ„์˜ ์Šค ๋‹ˆํŽซ์—์„œ ์˜ต์…˜ ๋ฐฐ์—ด์—๋Š” [{val: "1"}, {val: "2"}] ๋ผ๋Š” 2 ๊ฐœ์˜ ๊ฐ์ฒด๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.
ng-repeat ์€ ๊ทธ๊ฒƒ๋“ค์„ ๋ฐ˜๋ณตํ•˜๊ณ  val ์†์„ฑ์„ ์˜ต์…˜ ๊ฐ’๊ณผ ์ œ๋ชฉ์œผ๋กœ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
vm.selected ๋Š” select์˜ ng-model ๊ฐ’์œผ๋กœ ์‚ฌ์šฉ๋˜๋ฉฐ ์ฒ˜์Œ์—๋Š” "2"๋กœ ์„ค์ •๋ฉ๋‹ˆ๋‹ค.

Change options ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅธ ํ›„ ์˜ต์…˜ ๋ฐฐ์—ด์„ ๋‹ค์Œ์œผ๋กœ ๊ต์ฒดํ•ฉ๋‹ˆ๋‹ค. [{val: "2"}, {val: "3"}] ๋ฐ Angular 1.6์€ vm.selected ๊ฐ’์„ ์žฌ์„ค์ • ํ•˜์ง€๋งŒ 2 ๊ฐ’์ด์žˆ๋Š” ์˜ต์…˜์€ ์—ฌ์ „ํžˆ ๋ชฉ๋ก์— ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ๊ฒฝ์šฐ Angular 1.5๋Š” ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์ž‘๋™ํ•˜๋ฉฐ vm.selected ๊ฐ’์ด ์œ ์ง€๋ฉ๋‹ˆ๋‹ค.

vm.options ์— ๊ธฐ๋ณธ ๊ฐ’์ด ํฌํ•จ๋˜์–ด ์žˆ์œผ๋ฉด ๋ฒ„๊ทธ๊ฐ€ ๋‚˜ํƒ€๋‚˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค ( snippet ).

forms low investigation regression bug

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

https://github.com/angular/angular.js/commit/47c15fbcc10f118170813021e8e605ffd263ad84 : "-ํ˜„์žฌ ์„ ํƒ๋˜์–ด์žˆ๋Š” ์˜ต์…˜์ด ์ œ๊ฑฐ๋˜๊ฑฐ๋‚˜ ๊ฐ’์ด ๋ณ€๊ฒฝ๋˜๋ฉด ๋ชจ๋ธ์ด null๋กœ ์„ค์ •๋ฉ๋‹ˆ๋‹ค. " ๊ทธ๋Ÿฌ๋‚˜ ์ด๊ฒƒ์€ ์ด๊ฒƒ์ด ๊นจ์งˆ ์ˆ˜ ์žˆ๊ฑฐ๋‚˜ ngRepeat๊ฐ€ ์˜ต์…˜์„ ์—…๋ฐ์ดํŠธํ•˜๊ธฐ ์œ„ํ•ด ๋‹ค์ด์ œ์ŠคํŠธ๋ฅผ ์ทจํ•  ๊ฒƒ์ด๋ผ๋Š” ๊ฒƒ์„ ๊ณ ๋ คํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ์š”์†Œ์˜ ์ƒ์„ฑ / ํŒŒ๊ดด๋ฅผ ์ œ์–ดํ•˜๊ธฐ ๋•Œ๋ฌธ์— ngOptions์—์„œํ•˜๋Š” ๊ฒƒ์ด ๋” ์‰ฝ์Šต๋‹ˆ๋‹ค.
ํ•˜์ง€๋งŒ scheduleRender ()๋Š” ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. @gkalpak ! ์‹œํ—˜์„ ๊นจ๊ณ  PR์„ ์ค€๋น„ํ•ด ๋ณด๋„๋กํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  3 ๋Œ“๊ธ€

์œ ํšจํ•œ ๋ฌธ์ œ์ฒ˜๋Ÿผ ๋ณด์ด๋ฉฐ 1.6.0-rc.0์—์„œ ์ค‘๋‹จ๋ฉ๋‹ˆ๋‹ค. ์™œ ์ „์— ๋ฐœ์ƒํ•˜์ง€ ์•Š์•˜๋Š”์ง€ ํ™•์‹คํ•˜์ง€ ์•Š์ง€๋งŒ ๋ฌธ์ œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  1. ๋ฐฐ์—ด์ด ๋ณ€๊ฒฝ๋˜๋ฉด ngRepeat ๋Š” ์ด์ „ <option> ์š”์†Œ๋ฅผ ์ œ๊ฑฐํ•ฉ๋‹ˆ๋‹ค.
  2. ์ด๋กœ ์ธํ•ด <select> ๊ฐ€ ์„ ํƒ ํ•ด์ œ๋˜๊ณ  ngModel ๊ฐ€ null๋กœ ์„ค์ •๋ฉ๋‹ˆ๋‹ค.
  3. ์ƒˆ ํ•ญ๋ชฉ์€ ngRepeat ์— ์˜ํ•ด ์ƒ์„ฑ ๋ฐ ์‚ฝ์ž…๋˜์ง€๋งŒ modelValue๋Š” ๋” ์ด์ƒ 2 ์•„๋‹ˆ๋ฏ€๋กœ <select> ์€ (๋Š”) ์ƒˆ ํ•ญ๋ชฉ์„ ์ƒˆ <option value="2" ...> ์— ์—ฐ๊ฒฐํ•  ๋ฐฉ๋ฒ•์ด ์—†์Šต๋‹ˆ๋‹ค

ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์€ track by ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ <option> ์š”์†Œ๋ฅผ ์ œ๊ฑฐํ•˜๊ณ  ๋‹ค์‹œ ๋งŒ๋“œ๋Š” ๊ฒƒ์„ ๋ฐฉ์ง€ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

<option ng-repeat="option in options track by option.val" value="option.val">...

#

๊ฐ„๋žตํžˆ ์‚ดํŽด๋ณด๋ฉด ๋‹ค์Œ ์ปค๋ฐ‹์ด์ด ๋ฌธ์ œ๋ฅผ ์ผ์œผํ‚จ ํ›„๋ณด์ž…๋‹ˆ๋‹ค (ํ•˜์ง€๋งŒ ๋‹ค๋ฅธ ๊ฒƒ์ผ ์ˆ˜ ์žˆ์Œ).

  • f02b707
  • 47c15fb
  • 2785ad7

#

๋จธ๋ฆฟ์† ์—์„œ์ด ์ค„ ์„ scheduleRender() ๋กœ ๋ฐ”๊พธ๊ณ  ๋„์›€์ด๋˜๋Š”์ง€ ์•Œ์•„ ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

@Narretz ๊ฐ€ ๋” ๋‚˜์€ ํ†ต์ฐฐ๋ ฅ์„ ๊ฐ€์งˆ ๊ฒƒ์ด๋ผ๊ณ  ํ™•์‹ ํ•ฉ๋‹ˆ๋‹ค.

ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์€ track by๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ

์˜ˆ, ๊ทธ๊ฒƒ์„ ์ฐพ์•˜์ง€๋งŒ ์–ธ๊ธ‰ํ•˜๋Š” ๊ฒƒ์„ ์žŠ์—ˆ์Šต๋‹ˆ๋‹ค ๐Ÿ˜

https://github.com/angular/angular.js/commit/47c15fbcc10f118170813021e8e605ffd263ad84 : "-ํ˜„์žฌ ์„ ํƒ๋˜์–ด์žˆ๋Š” ์˜ต์…˜์ด ์ œ๊ฑฐ๋˜๊ฑฐ๋‚˜ ๊ฐ’์ด ๋ณ€๊ฒฝ๋˜๋ฉด ๋ชจ๋ธ์ด null๋กœ ์„ค์ •๋ฉ๋‹ˆ๋‹ค. " ๊ทธ๋Ÿฌ๋‚˜ ์ด๊ฒƒ์€ ์ด๊ฒƒ์ด ๊นจ์งˆ ์ˆ˜ ์žˆ๊ฑฐ๋‚˜ ngRepeat๊ฐ€ ์˜ต์…˜์„ ์—…๋ฐ์ดํŠธํ•˜๊ธฐ ์œ„ํ•ด ๋‹ค์ด์ œ์ŠคํŠธ๋ฅผ ์ทจํ•  ๊ฒƒ์ด๋ผ๋Š” ๊ฒƒ์„ ๊ณ ๋ คํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ์š”์†Œ์˜ ์ƒ์„ฑ / ํŒŒ๊ดด๋ฅผ ์ œ์–ดํ•˜๊ธฐ ๋•Œ๋ฌธ์— ngOptions์—์„œํ•˜๋Š” ๊ฒƒ์ด ๋” ์‰ฝ์Šต๋‹ˆ๋‹ค.
ํ•˜์ง€๋งŒ scheduleRender ()๋Š” ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. @gkalpak ! ์‹œํ—˜์„ ๊นจ๊ณ  PR์„ ์ค€๋น„ํ•ด ๋ณด๋„๋กํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰