Set multiple dropdowlnist value during edit operation using Angular js

Question

I am using ASP.NET MVC with angular js.

I have one page say hello.cshtml.

In which I have one dialog box in where I have on button "Add", on click of that button I add new row in table in dialog itself having two columns.

1) is for selecting the values from dropdownlist

2) a text box for enter value.

Here when I add new values in the table and selection of the list and enter values running perfectly fine just got an issue to set selected values in the dropdownlist during edit operation.

I am creating the list of that added row's value to store the information and on change of the dropdownlist I store value on the spot so that is running fine but during edit how I can set dropdownlist values back to set because ng-model is one that is assign in the dropdowlist once!

I have following code to set the value in my array object on change of the dropdowlist using jquery that is correctly running:

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

Now to set back those dropdowlist values in edit function what should I do? Html code where dropdownlist and new row has been added:

<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 code:

    $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

First of all you should not push a $scope as an object into your ReceiptLocationList while this will end in a unique object handling where all selected object attributes will be overriden. Just push an unique object into your list:

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

Inside your view you need to setup the right model attribute to your select ng-model attribute like:

<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>

Finally you can access your selected ReceiptLocationId in your controller like in in this demo output:

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