Angular에서의 ng-repeat 루프 내의 ng-model 바인딩JS

Angular에서의 ng-repeat 루프 내의 ng-model 바인딩JS

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"를 사용할 필요가 없습니다.valueng-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}}'" />
            &nbsp;{{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