選択ボックスの値を変更すると、angularjsで動的に生成される他の選択ボックスの値が変更されます

Question

私はangularjsを初めて使用しました。私は、以下のように、json配列の形式のデータがスコープオブジェクトからロードされているテーブルを持っています。

<table class="table table-bordered"> 
    <thead> 
     <tr style="background-color= #A4C831;background-color: #A4C831;color: #fff;border-color: 1px solid #fff !important;"> 
       <th>Date</th> 
       <th>Order Number</th> 
       <th>Refered By</th> 
       <th>ID</th> 
       <th>Name</th> 
       <th>Phone</th> 
       <th>Product Name</th> 
       <th>Quantity</th> 
       <th>Description</th> 
       <th>Status</th> 
       <th>Delete</th> 
       </tr> 
       </thead> 
       <tbody> 
        <tr ng-repeat="orders in ordersData"> 
           <td><span ng-bind="orders.createdDate" class="td-wrap"></span></td> 
           <td><span ng-bind="orders.ordernumber" class="td-wrap"></span></td> 
           <td><span ng-bind="orders.referedby" class="td-wrap"></span></td> 
           <td><span ng-bind="orders.id" class="td-wrap"></span></td> 
           <td><span ng-bind="orders.name" class="td-wrap"></span></td> 
           <td><span ng-bind="orders.phone" class="td-wrap"></span></td> 
           <td><span ng-bind="orders.productname" class="td-wrap"></span></td> 
           <td><span ng-bind="orders.quantity" class="td-wrap"></span></td> 
           <td><span ng-bind="orders.description" class="td-wrap"></span></td> 
           <td><!--<span ng-bind="orders.status" class="td-wrap"></span>--> 
           <select class="form-control" name="status" ng-model="manageorders.status" ng-change="setStatus(orders)"> 
             <option value="" disabled="disabled" selected="selected">Please select a role type</option> 
             <option value="Order Progress"><img src="img/navicons/rbusiness.png">Order Progress</option> 
             <option value="Order Cancelled"><img src="img/navicons/rvisitor.png">Order Cancelled</option> 
             <option value="Order Dispatched"><img src="img/navicons/rvisitor.png">Order Dispatched</option> 
             <option value="Order on Hold"><img src="img/navicons/rvisitor.png">Order on Hold</option> 
           </select> 
           </td> 
           <td> 
            <input type='button' value="delete" class="btn btn-danger" ng-click="deleteOrders(orders)"> 
           </td> 
          </tr> 

          </tbody> 
         </table> 

と下記のようなjsonデータ。

$scope.ordersData = 
[{id: 125, name: "manju", phone: "9215649870", productname: "vari vriddhi", quantity: "123", "description": "super product", "status": "dispatched"}, 
    {id: 124, name: "manju", phone: "", productname: "leafmate", quantity: "123", "description": "not good", "status": "dispatched"}, 
    {id: 121, name: "upi", phone: "9876543214", productname: "vari vriddhi", quantity: "13", "description": "awesome product", "status": "order cancelled"}] 

ここで最後の列に選択ボックスが表示されています。動的に生成されます。 1つの選択ボックスの値を変更するたびに、他の選択ボックスの値も変更されます。この問題を解決するために、事前に感謝してください。:)

Answer 1

manageorders.statusという変数を使用して注文状況を把握しているようです。問題は、ステータスを保持する変数が、動的に作成されたすべての行で同じであることです。

すべての注文にステータスを追加してください。 Heres a working fiddle。