์ฐธ๊ณ : ์ง์ ์ง๋ฌธ์ 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 ).
์ ํจํ ๋ฌธ์ ์ฒ๋ผ ๋ณด์ด๋ฉฐ 1.6.0-rc.0์์ ์ค๋จ๋ฉ๋๋ค. ์ ์ ์ ๋ฐ์ํ์ง ์์๋์ง ํ์คํ์ง ์์ง๋ง ๋ฌธ์ ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
ngRepeat
๋ ์ด์ <option>
์์๋ฅผ ์ ๊ฑฐํฉ๋๋ค.<select>
๊ฐ ์ ํ ํด์ ๋๊ณ ngModel
๊ฐ null๋ก ์ค์ ๋ฉ๋๋ค.ngRepeat
์ ์ํด ์์ฑ ๋ฐ ์ฝ์
๋์ง๋ง modelValue๋ ๋ ์ด์ 2
์๋๋ฏ๋ก <select>
์ (๋) ์ ํญ๋ชฉ์ ์ <option value="2" ...>
์ ์ฐ๊ฒฐํ ๋ฐฉ๋ฒ์ด ์์ต๋๋ค ํด๊ฒฐ ๋ฐฉ๋ฒ์ track by
๋ฅผ ์ฌ์ฉํ์ฌ <option>
์์๋ฅผ ์ ๊ฑฐํ๊ณ ๋ค์ ๋ง๋๋ ๊ฒ์ ๋ฐฉ์งํ๋ ๊ฒ์
๋๋ค.
<option ng-repeat="option in options track by option.val" value="option.val">...
๊ฐ๋ตํ ์ดํด๋ณด๋ฉด ๋ค์ ์ปค๋ฐ์ด์ด ๋ฌธ์ ๋ฅผ ์ผ์ผํจ ํ๋ณด์ ๋๋ค (ํ์ง๋ง ๋ค๋ฅธ ๊ฒ์ผ ์ ์์).
๋จธ๋ฆฟ์ ์์์ด ์ค ์ scheduleRender()
๋ก ๋ฐ๊พธ๊ณ ๋์์ด๋๋์ง ์์ ๋ณด๊ฒ ์ต๋๋ค.
@Narretz ๊ฐ ๋ ๋์ ํต์ฐฐ๋ ฅ์ ๊ฐ์ง ๊ฒ์ด๋ผ๊ณ ํ์ ํฉ๋๋ค.
ํด๊ฒฐ ๋ฐฉ๋ฒ์ track by๋ฅผ ์ฌ์ฉํ์ฌ
์, ๊ทธ๊ฒ์ ์ฐพ์์ง๋ง ์ธ๊ธํ๋ ๊ฒ์ ์์์ต๋๋ค ๐
https://github.com/angular/angular.js/commit/47c15fbcc10f118170813021e8e605ffd263ad84 : "-ํ์ฌ ์ ํ๋์ด์๋ ์ต์
์ด ์ ๊ฑฐ๋๊ฑฐ๋ ๊ฐ์ด ๋ณ๊ฒฝ๋๋ฉด ๋ชจ๋ธ์ด null๋ก ์ค์ ๋ฉ๋๋ค. " ๊ทธ๋ฌ๋ ์ด๊ฒ์ ์ด๊ฒ์ด ๊นจ์ง ์ ์๊ฑฐ๋ ngRepeat๊ฐ ์ต์
์ ์
๋ฐ์ดํธํ๊ธฐ ์ํด ๋ค์ด์ ์คํธ๋ฅผ ์ทจํ ๊ฒ์ด๋ผ๋ ๊ฒ์ ๊ณ ๋ คํ์ง ์์์ต๋๋ค. ์ฐ๋ฆฌ๊ฐ ์์์ ์์ฑ / ํ๊ดด๋ฅผ ์ ์ดํ๊ธฐ ๋๋ฌธ์ ngOptions์์ํ๋ ๊ฒ์ด ๋ ์ฝ์ต๋๋ค.
ํ์ง๋ง scheduleRender ()๋ ์๋ํฉ๋๋ค. @gkalpak ! ์ํ์ ๊นจ๊ณ PR์ ์ค๋นํด ๋ณด๋๋กํ๊ฒ ์ต๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
https://github.com/angular/angular.js/commit/47c15fbcc10f118170813021e8e605ffd263ad84 : "-ํ์ฌ ์ ํ๋์ด์๋ ์ต์ ์ด ์ ๊ฑฐ๋๊ฑฐ๋ ๊ฐ์ด ๋ณ๊ฒฝ๋๋ฉด ๋ชจ๋ธ์ด null๋ก ์ค์ ๋ฉ๋๋ค. " ๊ทธ๋ฌ๋ ์ด๊ฒ์ ์ด๊ฒ์ด ๊นจ์ง ์ ์๊ฑฐ๋ ngRepeat๊ฐ ์ต์ ์ ์ ๋ฐ์ดํธํ๊ธฐ ์ํด ๋ค์ด์ ์คํธ๋ฅผ ์ทจํ ๊ฒ์ด๋ผ๋ ๊ฒ์ ๊ณ ๋ คํ์ง ์์์ต๋๋ค. ์ฐ๋ฆฌ๊ฐ ์์์ ์์ฑ / ํ๊ดด๋ฅผ ์ ์ดํ๊ธฐ ๋๋ฌธ์ ngOptions์์ํ๋ ๊ฒ์ด ๋ ์ฝ์ต๋๋ค.
ํ์ง๋ง scheduleRender ()๋ ์๋ํฉ๋๋ค. @gkalpak ! ์ํ์ ๊นจ๊ณ PR์ ์ค๋นํด ๋ณด๋๋กํ๊ฒ ์ต๋๋ค.