Ràng buộc ng-model bên trong vòng lặp ng-repeat trong AngularJS

Tôi đang cố gắng giải quyết vấn đề về phạm vi bên trong vòng lặp ng-repeat - Tôi đã duyệt qua một số câu hỏi nhưng vẫn chưa thể làm cho mã của mình hoạt động.

Mã bộ điều khiển:

function Ctrl($scope) {
  $scope.lines = [{text: 'res1'}, {text:'res2'}];
}

Lượt xem:

<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>

Đây là một trò chơi: http://jsfiddle.net/cyberwombat/zqTah/

Về cơ bản, tôi có một đối tượng (đó là một trình tạo tờ rơi) chứa nhiều dòng văn bản. Mỗi dòng văn bản có thể được người dùng tinh chỉnh (văn bản, phông chữ, kích thước, màu sắc, v.v.) và tôi muốn tạo bản xem trước cho nó. Ví dụ trên chỉ hiển thị trường nhập để nhập văn bản và tôi muốn điều đó tự động / khi bạn nhập cập nhật div xem trước nhưng sẽ có nhiều điều khiển hơn.

Tôi cũng không chắc mình đã lấy đúng mã cho chỉ mục vòng lặp - đó có phải là cách tốt nhất để tạo tên ng-model bên trong vòng lặp không?

Đối với mỗi lần lặp của vòng lặp ng-repeat, linelà một tham chiếu đến một đối tượng trong mảng của bạn. Do đó, để xem trước giá trị, hãy sử dụng {{line.text}}.

Tương tự, để DataBind đến các văn bản, DataBind với cùng: ng-model="line.text". Bạn không cần sử dụng valuekhi sử dụng ng-model (thực ra là không nên).

Làm biếng .

Để có cái nhìn sâu hơn về phạm vi và ng-repeat, hãy xem Các sắc thái của kế thừa nguyên mẫu / nguyên mẫu phạm vi trong AngularJS là gì? , phần ng-lặp lại .

<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>