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

Question

我有使用ng-repeat的动态选择框。然后我通过ng-change传递每个选择框的索引值。

这是我的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>

这是我的js：

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

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

这是屏幕：

在此，我使用了索引值使其成为唯一的。如果我选择第一个选择框，则数组将类似于

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

之后，如果我选择第3个选择框，则数组就像

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

注意：第一个元素的索引是0，因为我选择了第一个框。然后第二个元素的索引是2，因为我选择了第3个框而不是第2个框。

之后，我在第二个框中选择了控制台中的数组值

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

数组位置1 {"index":2,"risk_disc_en":"Impact"}中的元素  被替换为 {"index":1,"risk_disc_en":"Probability"}

但我希望输出数组像

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

如果索引值之前不存在，则元素应插入正确的位置。如果它存在之前它将更新或替换具有相同索引值的相应元素。

例如：

案例1： arr={0,2}我尝试插入1，它应该像arr={0,1,2}。在我的情况下，它替换元素，看起来像arr={0,1}

案例2： arr={0,2}我尝试再插入2，它应该替换，数组应该像arr={0,2}

Answer 1

我认为首先搜索该项目会更好。如果你有这个项目，你不需要做任何事情。但是如果你没有，你可以在指定的索引上推送项目：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用Object作为地图来跟踪所选选项并对对象值进行排序以获取已排序的数组。

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