CODEWITHSUNDEEP
angularjsangularjs-ng-options
stackMan10
stackMan10

Reputation: 742

How to get the selecteditem for each row based on its index?

Angularjs adding blank value to html select instead of default value

We have a table with rows where each row is editable. In each row there is a select box which has a pre-selected value that we get from the server. However,when using the below code, there is a blank value that is added automatically and the ng-model is not respected.

<select ng-if="lic.$edit" class="form-control " style="width:130px"
        ng-model="lic.license_type"
        ng-options="item.Type for item in licensetype track by item.ID" 
        required>
  <option value="">Select Type</option> 
</select>

lic.licence_type has the selected string value.

licensetype is an hardcoded array for the remaining options.

To solve this we added an onclick function when edit button is clicked to get the current selected item and filtering the array using the id of the current item.

$scope.editLic =function(arr, type, index){ 
    $scope.selectedItem = $scope.licensetype.find(function (o) { 
        return o.Type == type
    })  
}

This essentially solves the blank value in select. by setting ng-model to the selectedItem instead of lic.license_type. Like this:

<select ng-if="lic.$edit" class="form-control " style="width:130px"
        ng-model="selectedItem"
        ng-options="item.Type for item in licensetype track by item.ID"
        required>
  <option value="">Select Type</option> 
</select>

While this solves the original issue, there is no way to maintain the index of the ng-model because each row has the same ng-model now "selectedType" and it changes each time edit is clicked.

Angular Version : 1.6.2

For the above solution my question is:

How to get the selecteditem for each row based on its index?
EDIT : I have thoroughly searched before posting this question. This is not a duplicate. The issue here is that there are multiple rows each with a select. Most question with the accepted answer has one select box. So that solution doesn't work here.

UPDATE:

Sovled this by doing this:

$scope.editLic =function(arr, type, index){
  $scope.selectedItem[index] = $scope.licensetype.find(function (o) { return o.Type == type});
}


  <select ng-if="lic.$edit" class="form-control " style="width:130px"
          ng-model="selectedItem[$index]" 
          ng-options="item.Type for item in licensetype track by item.ID"
          required>
      <option value="">Select Type</option> 
  </select>

Upvotes: 0

Views: 31

Answers (0)

Related Questions