在数组中插入元素取决于其索引位置，而不替换或更改angularjs中的其他元素

Question

I have dynamic select box using ng-repeat. Then I passed the index value for every select box by ng-change.

This is my html:

    <thead>
      <th ng-repeat="l in labels"><div style="width:200px;"></div>{{l.labelname_en}}
      </th>
   </thead>

   <tbody>
      <td ng-repeat="e in excelvalues">
          <select name="selectExcel" class="form-control"  ng-model="selectedExcel" ng-options="excel for excel in excelvalues" ng-change="change(selectedExcel,$index)">
          </select>
      </td>
  </tbody>

This is my js:

$scope.change = function(excel,index){

            var data = {
                index:index,
                risk_disc_en:excel
            };
           $scope.arr.splice(index,1,data);
}

This is the screen:

In this, I have used the index value for making it as unique. If I selected the 1st select box the array will be like

[{"index":0,"risk_disc_en":"Risk Description"}]

After that, if I selected the 3rd select box the array be like

[{"index":0,"risk_disc_en":"Risk Description"},{"index":2,"risk_disc_en":"Impact"}]

Note: The index of the 1st element is 0 because I selected the 1st box. Then the index of the 2nd element is 2 because I selected the 3rd box instead of the 2nd box.

After that, I selected the 2nd box the array value in the console like

[{"index":0,"risk_disc_en":"Risk Description"},{"index":1,"risk_disc_en":"Probability"}]

The element in the array position 1 {"index":2,"risk_disc_en":"Impact"} is replaced by {"index":1,"risk_disc_en":"Probability"}

but I want the output array like

[{"index":0,"risk_disc_en":"RiskDescription"},`{"index":1,"risk_disc_en":"Probability"},{"index":2,"risk_disc_en":"Impact"}]`

If the index value does not exist before, the element should insert at the correct position. If it exists before it will update or replace the corresponding element having the same index value.

For example :

case 1: arr={0,2} and I try to insert 1 it should be like arr={0,1,2} . In my case it replace the element and looks like arr={0,1}

case 2: arr={0,2} and I try to insert 2 again it should replace and array be like arr={0,2}

Answer 1

I think it will be better to search for the item first. If you got the item, you don't need to do anything. But if you didn't, you can push the item on the specified index:

 $scope.change = function(excel, index) { var data = { index: index, risk_disc_en: excel }; var index = $scope.arr.findIndex(item => item.index === index); if (index === -1) { $scope.arr.splice(index, 0, data); } else { $scope.arr.splice(index, 1, data); } } 

Answer 2

You can use an Object as map to keep track of selected options and sort the object values to get the sorted array.

 $scope = {}; $scope.map = {}; $scope.change = function(excel, index) { var data = { index: index, risk_disc_en: excel }; $scope.map[index] = data; $scope.arr = Object.values($scope.map).sort(function(a,b){ return a.value - b.value; }) } $scope.change("item2", 2); $scope.change("item3", 3); $scope.change("item0", 0); console.log($scope.arr);