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

What exactly is your problem? Please show your controller & view code where you try to set the default value. — lin, Mar 25 '17 at 08:44
@lin Yes I already added a view with marked sign that is dialog in the question. — 3 rules, Mar 25 '17 at 08:53
We need your view code, not a screenshot. Why do you mix jQuery with AngularJS? — lin, Mar 25 '17 at 08:56
I don't know whole angular js so as of now I do it with using jquery where I don't know how to do with angular so... I know it's bad habit but I am in learning face now... — 3 rules, Mar 25 '17 at 09:51
Kick jQuery out of your application and check this http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background Please add your view code. And update your controller code once you removed jQuery. — lin, Mar 25 '17 at 09:53
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/139012/discussion-between-padhiyar-and-lin). — 3 rules, Mar 25 '17 at 10:08

lin · Accepted Answer · 2017-03-25T11:06:57.660

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

Set multiple dropdowlnist value during edit operation using Angular js

1 Answers1