使用Angularjs在编辑操作期间设置多个下拉列表值

Question

我正在使用带有 Angular js 的 ASP.NET MVC。

我有一页说 hello.cshtml。

在其中我有一个对话框，其中我有按钮“添加”，单击该按钮时，我在对话框本身的表中添加新行，其中包含两列。

1) 用于从下拉列表中选择值

2) 输入值的文本框。

在这里，当我在表中添加新值并选择列表并输入运行正常的值时，在编辑操作期间在下拉列表中设置选定值时遇到问题。

我正在创建添加行的值的列表以存储信息，并且在更改下拉列表时我在现场存储值以便运行正常但在编辑期间我如何将下拉列表值设置回设置，因为 ng-model是在下拉列表中分配一次的！

我有以下代码来设置我的数组对象中的值，使用正确运行的 jquery 更改 dropdowlist：

    $scope.changeLocationRack = function (receiptlocationid, index) {
            for (var i = 0; i < $scope.ReceiptDetail.ReceiptLocationList.length; i++) {
                if ($scope.ReceiptDetail.ReceiptLocationList[i].ReceiptLocationId == receiptlocationid) {
                    $scope.ReceiptDetail.ReceiptLocationList[i].LocationRackId = $("#ddllocationrack_" + index).val();
                    $scope.ReceiptDetail.ReceiptLocationList[i].LocationName = $("#ddllocationrack_" + index + " :selected").text();
                    break;
                }
            }
        }

现在要在编辑函数中设置那些 dropdowlist 值，我应该怎么做？ 已添加下拉列表和新行的 HTML 代码：

<div class="form-group row gutter">
  <button class="btn btn-primary pull-right" type="button" style="margin-right: 10px" ng-click="AddLocationRack()">Add Location Rack</button>
</div>
<div class="form-group gutter">
  <fieldset>
    <legend>
      <b>Receipt Location Racks</b>
    </legend>
    <div class="form-group gutter">
      <table id="tblReceiptLocationRack" class="table table-striped table-condensed table-bordered no-margin">
        <thead>
        <tr style="background-color:#357CBA; color: white;">
          <th>Location Rack</th>
          <th>Quantity</th>
          <th></th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="r in ReceiptDetail.ReceiptLocationList track by $index">
          <td>
            <select class="form-control dropdownSelect2" ng-model="SelectedLocationRack" title="Choose Location Rack from List" ng-options="s as s.RackName for s in EnveeFee.LocationRackList track by s.LocationRackId" ng-change="changeLocationRack(r.ReceiptLocationId,r.ReceiptLocationId)" id="ddllocationrack_{{r.ReceiptLocationId}}" required>
              <option value="">Select Location Rack</option>
            </select>
          </td>

          <td>
            <input type="number" class="form-control" style="text-align:right" id="qtyreceived{{$index}}" ng-model="r.QtyReceived" required />
          </td>
          <td class="text-center" style="vertical-align:middle"><span title="Remove" style="font-size:18px;color:red;cursor:pointer;" class="icon-cross2" ng-click="removelocationrack(r.ReceiptLocationId)"></span></td>
        </tr>
        </tbody>
      </table>
    </div>
  </fieldset>
</div>

角码：

    $scope.ReceiptDetail = {
        ReceiptLineId: 0,
        ReceiptId: 0,
        SizeId: 0,
        ReceiptQty: '',
        UnitRate: '',
        Amount: '',
        ReceiptLocationList: [],
        cadrate: '',
        hst: '',
        Size: '',
        LocationName: '',
        SizeObject: {}
    }

$scope.ReceiptLocation = {
        ReceiptLocationId: 0,
        LocationRackId: 0,
        QtyReceived: '',
        QtyIssued: '',
        LocationName: ''
    }    

    $scope.AddLocationRack = function () {            
        $scope.ReceiptDetail.ReceiptLocationList.push($scope.ReceiptLocation);
    }

Answer 1

首先，您不应该将$scope 作为对象推送到您的ReceiptLocationList 中，因为这将以唯一的对象处理结束，其中所有选定的对象属性都将被覆盖。只需将一个独特的对象推送到您的列表中：

$scope.ReceiptDetail = {
    ReceiptLineId: 0,
    ReceiptId: 0,
    SizeId: 0,
    ReceiptQty: '',
    UnitRate: '',
    Amount: '',
    ReceiptLocationList: [],
    cadrate: '',
    hst: '',
    Size: '',
    LocationName: '',
    SizeObject: {}
};

$scope.AddLocationRack = function () {
    $scope.ReceiptDetail.ReceiptLocationList.push({
        ReceiptLocationId: 0,
        LocationRackId: 0,
        QtyReceived: '',
        QtyIssued: '',
        LocationName: ''
    });
};

在您的视图中，您需要为您选择的ng-model 属性设置正确的模型属性，例如：

<tr ng-repeat="r in ReceiptDetail.ReceiptLocationList track by $index">
  <td>
    <select class="form-control dropdownSelect2"
            ng-model="r.ReceiptLocationId"
            title="Choose Location Rack from List"
            ng-options="s.LocationRackId as s.RackName for s in EnveeFee.LocationRackList track by s.LocationRackId"
            id="ddllocationrack_{{r.ReceiptLocationId}}" required>
      <option value="">Select Location Rack</option>
    </select>
  </td>
  <td>
    <input type="number" 
           class="form-control" 
           style="text-align:right" 
           id="qtyreceived{{$index}}" 
           ng-model="r.QtyReceived" required />
  </td>
  <td class="text-center" 
      style="vertical-align:middle">
        <span title="Remove" 
              style="font-size:18px;color:red;cursor:pointer;" 
              class="icon-cross2" 
              ng-click="removelocationrack(r.ReceiptLocationId)"></span>
  </td>
</tr>

最后，您可以在控制器中访问您选择的ReceiptLocationId，就像在这个演示输出中一样：

angular.forEach($scope.ReceiptDetail.ReceiptLocationList, function (receiptLocationListItem) {
    console.log(receiptLocationListItem.ReceiptLocationId);
});