用AngularJS中的数组中的现有值替换对象答案

【问题标题】：Replace object with existing value in array in AngularJS用AngularJS中的数组中的现有值替换对象
【发布时间】：2017-02-19 22:57:42
【问题描述】：

我有一个 ng-repeat，每个项目都有一个选择。

用户可以选择一个值（触发将一个对象推送到数组中的函数），但他们也可以改变主意，在这种情况下，代码只是推送具有新值的第二个对象，复制第一个对象.

我怎样才能真正删除现有值，在每次 ng-change 时只保留最后一个值？

这是我的 HTML：

<select ng-change="insertproduct(pa.nom, basket)" ng-model="basket">
  <option ng-repeat="select in numberofproducts">{{select}}</option>
</select>

还有我的javascript：

$scope.numberofproducts = [1,2,3,4,5,6,7,8,9,10]

$scope.singleorder = [];

$scope.insertproduct = function(nom, basket){
  $scope.numero = {
    'producte': nom,
    'numero': basket
  };
  $scope.singleorder.push($scope.numero);
  console.log($scope.singleorder);
}

这个想法是创建一个条件，其中如果数组包含参数“producte”等于新对象的对象，则删除现有对象并推送新对象。

有什么建议吗？

【问题讨论】：

标签： javascript angularjs arrays

【解决方案1】：

首先，使用findIndex方法检查singleorder数组中是否已经存在具有相同属性的对象。

function duplicateOrder(order) { 
    return order.producte === nom;
}
var index = $scope.singleorder.findIndex(duplicateOrder);

注意：browser support for findIndex 是有限的； Internet Explorer 不支持它。

然后删除带有splice的项目：

if(index > -1){
$scope.singleorder.splice(index, 1);
}

然后你可以把新的推进去。

您还应该清理您的编码风格：不要混合使用法语和英语，并在您的函数中使用 camelCase 或 snake_case以提高可读性。

【讨论】：

【解决方案2】：

观察：

使用 AngularJS 的 ngOptions 属性而不是 ng-repeat。
您可以检查数组中元素的index，如果该元素已经存在，您可以轻松删除之前的元素。

演示

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl',function($scope) {
    $scope.numberofproducts = [1,2,3,4,5,6,7,8,9,10]

    $scope.newArray = [];

    $scope.insertproduct = function(basket) {
      var prevIndex = $scope.newArray.indexOf(basket);
      if(prevIndex > -1) {
        $scope.newArray.splice(prevIndex, 1);
      } else {
        $scope.newArray.push(basket);
      }
      console.log($scope.newArray);
    }
   
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
 <select ng-change="insertproduct(basket)" ng-model="basket" ng-options="select for select in numberofproducts">
</select>
</div>

【讨论】：