Question

我想使用AngularJS更新JSON集合中的文档

我的JSON Collection：

$Scope.employee = {
        "staff" : 
        [
            {
              "id" : 1,
              "Name" : "John",
              "email" : "john@abc.com"
            },
            {
              "id" : 2,
              "Name" : "Watson",
              "email" : "watson@abc.com"
            },
            {
              "id" : 3,
              "Name" : "jack",
              "email" : "jack@abc.com"
            },
            {
              "id" : 4,
              "Name" : "Jim",
              "email" : "jim@abc.com"
            },
            {
              "id" : 5,
              "Name" : "Rose",
              "email" : "rose@abc.com"
            }
        ]            
  };

现在我需要将 Id = 2 的文档更新为

$Scope.updateEmployee = {
    "id" : 2,
    "Name": "Emma",
    "email": "emma@abc.com"
};

请帮助我如何替换特定文档，并希望将 email 的 id = 5 更新为 {{ 1}}

Answer 1

你可以这样做，

$scope.update = function(){
 $scope.employee.staff.forEach(function (item) {
    if (item.id == 2 ) {
        item.Name = "Emma";
        item.email ="emma@abc.com";
    };        
});     
}

DEMO

Answer 2

$scope.updateItem = function(item) {
  for (var i = 0; i < $cope.employee.staff.length; i++) {
    if (item.id === $scope.employee.staff[i].id) {
      $scope.employee.staff[i] = item;
      break;
    }
  }
}

现在，如果您想更新ID为5的$ Scope.employee，请执行以下操作：

$scope.updateItem({
  id: 5,
  Name: 'bill',
  email: 'test@test.fr'
});

Answer 3

您可以使用underscore.js

执行此操作

Plunker

基本上，您应该避免遍历整个列表，因为这可能会导致一些与性能相关的问题。 underscore.js将会做的是，它会在找到可接受的元素后立即返回，并且不会遍历整个列表。

阅读官方文档here

find_.find（list，predicate，[context]） Alias：detect
查看列表中的每个值，返回通过a的第一个值真值测试（谓词），如果没有值通过测试，则为undefined。该函数一找到可接受的元素就返回，并且不会遍历整个列表。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
    $scope.employee = {
        "staff": [{
            "id": 1,
            "Name": "John",
            "email": "john@abc.com"
        }, {
            "id": 2,
            "Name": "Watson",
            "email": "watson@abc.com"
        }, {
            "id": 3,
            "Name": "jack",
            "email": "jack@abc.com"
        }, {
            "id": 4,
            "Name": "Jim",
            "email": "jim@abc.com"
        }, {
            "id": 5,
            "Name": "Rose",
            "email": "rose@abc.com"
        }]
    };
    $scope.update = function() {
        var index = _.findIndex($scope.employee.staff, function(o) {
            return o.id == 2;
        })
        $scope.employee.staff[index].Name = "Emma";
        $scope.employee.staff[index].email = "emma@abc.com";
    }
});

<!DOCTYPE html>
<html ng-app="plunker">
	<head>
		<meta charset="utf-8" />
		<title>AngularJS Plunker</title>
		<script>document.write('
			<base href="' + document.location + '" />');
		</script>
		<link rel="stylesheet" href="style.css" />
		<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
		<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
		<script src="app.js"></script>
	</head>
	<body ng-controller="MainCtrl">
		<div ng-repeat="emp in employee.staff ">
			<div>{{emp.id}} {{emp.Name}}</div>
		</div>
		<button ng-click="update()">
     Update
    </button>
	</body>
</html>

使用AngularJS更新JSON集合中的文档

3 个答案: