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

Question

我正在使用 ASP.NET MVC 和 angular js。

我有一页说 hello.cshtml。

我在其中有一个对话框，其中有按钮“Add”，单击该按钮后，我在对话框本身的 table 中添加了新行有两列。

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

2) 用于输入值的文本框。

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

我正在创建该添加行值的列表来存储信息，并且在更改下拉列表时我在现场存储值，这样运行很好，但是在编辑期间我如何设置下拉列表值设置，因为 ng-model 是在下拉列表中分配一次的模型！

我有以下代码在使用 jquery 更改下拉列表时设置数组对象中的值，正确的是运行:

    $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;
                }
            }
        }

现在要在编辑功能中设置回那些下拉列表值我应该怎么做？ 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>

angular代码：

    $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 中，因为这将导致一个独特的对象处理，其中所有 selected 对象属性将被覆盖.只需将一个独特的对象推入您的列表：

$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: ''
    });
};

在您的视图中，您需要为 select 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>

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

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

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

Set multiple dropdowlnist value during edit operation using Angular js

javascript

asp.net-mvc

html-select

angularjs

angular-ngmodel