[英]Changing the value of select box changes the values of other select boxes which are dynamically generated in angularjs
我是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"}]
在這里,我在最后一欄中給出了選擇框。 它是動態生成的。 但是每當我更改一個選擇框的值時,其他選擇框的值也會更改。 請幫助我解決這個問題,在此先謝謝.. :)
看起來您正在使用一個稱為manageorders.status
的變量來跟蹤訂單狀態。 問題在於,保存狀態的變量對於每個動態創建的行都是相同的。
您應該嘗試為每個訂單添加狀態。 這是工作中的小提琴 。
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.