更改选择框的值会更改在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: "9876543210", 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"}]

在这里，我在最后一列中给出了选择框。它是动态生成的。但是每当我改变一个选择框的值时，其他选择框的值也会改变。请帮我解决这个问题，在此先感谢.. :)

Answer 1

您似乎正在使用名为manageorders.status 的变量来跟踪订单状态。问题在于，对于每个动态创建的行，保存状态的变量都是相同的。

您应该尝试为每个订单添加状态。 Heres a working fiddle.

<tr ng-repeat="orders in ordersData">
    ...
    <td>
        <select class="form-control" name="status" ng-model="orders.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>
    ...
</tr>