AngularJS의 ng-repeat 루프 내부에 ng-model 바인딩
ng-repeat 루프 내에서 범위 문제를 처리하려고합니다. 몇 가지 질문을 살펴 봤지만 코드가 제대로 작동하지 않습니다.
컨트롤러 코드 :
function Ctrl($scope) {
$scope.lines = [{text: 'res1'}, {text:'res2'}];
}
전망:
<div ng-app>
<div ng-controller="Ctrl">
<div ng-repeat="line in lines">
<div class="preview">{{text}}{{$index}}</div>
</div>
<div ng-repeat="line in lines">
<-- typing here should auto update it's preview above -->
<input value="{{line.text}}" ng-model="text{{$index}}"/>
<!-- many other fields here that will also affect the preview -->
</div>
</div>
</div>
여기 바이올린이 있습니다 : http://jsfiddle.net/cyberwombat/zqTah/
기본적으로 여러 줄의 텍스트를 포함하는 개체 (전단지 생성기)가 있습니다. 각 텍스트 줄은 사용자 (텍스트, 글꼴, 크기, 색상 등)가 조정할 수 있으며 미리보기를 만들고 싶습니다. 위의 예는 텍스트를 입력하기위한 입력 필드 만 표시하며 자동으로 / 입력 할 때 미리보기 div를 업데이트하고 싶지만 더 많은 컨트롤이 있습니다.
루핑 인덱스에 대한 코드가 올바른지 확실하지 않습니다. 루프 내부에서 ng-model 이름을 만드는 가장 좋은 방법입니까?
ng-repeat 루프의 각 반복에 대해 line
배열의 객체에 대한 참조입니다. 따라서 값을 미리 보려면 {{line.text}}
.
마찬가지로 텍스트에 데이터 바인딩하려면 동일한 데이터 바인딩 : ng-model="line.text"
. value
ng-model 을 사용할 때 사용할 필요가 없습니다 (실제로는 안됩니다).
바이올린 .
범위 및 ng-repeat에 대한 자세한 내용은 AngularJS에서 범위 프로토 타입 / 프로토 타입 상속의 뉘앙스는 무엇입니까?를 참조하세요. , 섹션 ng-repeat .
<h4>Order List</h4>
<ul>
<li ng-repeat="val in filter_option.order">
<span>
<input title="{{filter_option.order_name[$index]}}" type="radio" ng-model="filter_param.order_option" ng-value="'{{val}}'" />
{{filter_option.order_name[$index]}}
</span>
<select title="" ng-model="filter_param[val]">
<option value="asc">Asc</option>
<option value="desc">Desc</option>
</select>
</li>
</ul>
참고 URL : https://stackoverflow.com/questions/14410993/binding-ng-model-inside-ng-repeat-loop-in-angularjs
'IT story' 카테고리의 다른 글
HTML 링크로 폴더를 여는 방법은 무엇입니까? (0) | 2020.09.01 |
---|---|
API 설계를위한 모범 사례 및 지침 (0) | 2020.09.01 |
Visual Studio 2008에서 JavaScript / jQuery Intellisense를 어떻게 작동 시키나요? (0) | 2020.09.01 |
'입력'요소에 대한 '변경'이벤트와 '입력'이벤트의 차이점 (0) | 2020.09.01 |
SQL Server에서 PAGEIOLATCH_SH 대기 유형이란 무엇입니까? (0) | 2020.09.01 |