การผูก ng-model ภายใน ng-repeat loop ใน AngularJS

Question 1

ฉันกำลังพยายามจัดการกับปัญหาของขอบเขตภายในการวนซ้ำ 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 ภายในลูปหรือไม่

Question 2

สำหรับการวนซ้ำของ ng-repeat แต่ละครั้งlineเป็นการอ้างอิงถึงออบเจ็กต์ในอาร์เรย์ของคุณ {{line.text}}ดังนั้นเพื่อดูตัวอย่างค่าใช้

ในทำนองเดียวกันการ DataBind ข้อความ, DataBind ng-model="line.text"เดียวกัน: คุณไม่จำเป็นต้องใช้valueเมื่อใช้ ng-model (จริงๆแล้วคุณไม่ควร)

ซอ .

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับขอบเขตและ ng-repeat ให้ดูที่ความแตกต่างของการสืบทอดต้นแบบขอบเขต / ต้นแบบใน AngularJS คืออะไร? , ส่วนng-repeat .

Question 3

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