Question

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

我有一页说hello.cshtml。

我在按钮“添加”中有一个对话框，点击该按钮我在对话框本身的表格中添加了新行，有两列。

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

2）输入值的文本框。

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

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

我有以下代码在使用正确运行的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);
});

使用Angular js在编辑操作期间设置多个dropdowlnist值

1 个答案: