将项目动态添加到 ng-repeat 数组 javascript

Question

我必须关注 angularjs

中的一系列项目

angular.module('app').controller('AppController', function ($scope, $timeout) {
    $scope.items = {
        item1: {
            name: "Hamburger",
            complete: "50%",
            start: "2015/09/10 11:00",
            finish: "2015/09/11 04:00",
            work: "8 hours"
        },
        item2: {
            name: "Pasta",
            complete: "50%",
            start: "2015/09/10 11:00",
            finish: "2015/09/11 04:00",
            work: "8 hours"
        },
        item3: {
            name: "Potato",
            complete: "80%",
            start: "2015/09/10 18:00",
            finish: "2015/09/11 04:00",
            work: "8 hours"
        }
    };

    $scope.items.push({
        item4: {
            name: "Ham",
            complete: "50%"...
        }
    });
}

我想给它添加一个新项目，但是它不起作用。

我尝试了 .push(item) 方法，但失败并在控制台中显示以下消息

Object doesn't support property or method 'push'

将项目添加到此现有数组的最简单方法是什么？

Answer 1

实际上你使用的是对象（不是数组）

为对象添加值： $scope.items[key] = value;

或

初始化数组而不是对象 $scope.items = [....];

Answer 2

你的$scope.items数据不是一个数组，而是一个对象。你用 { } 声明它，对象没有得到 .push() 方法。

如果你想使用Array.prototype.push()方法，你必须delcare一个数组，所以只需更改：

$scope.items = { ..... };

来自

$scope.items = [ ..... ];

所以你将能够做到：

$scope.items.push({item4 : { name: "Ham", complete: "50%"...}});

Answer 3

根据您的代码 $scope.items 是一个对象而不是数组。所以 $scope.items.push 会抛出一个错误。

您可以将 $scope.items 转换为数组或使用 $scope.items.item4 = { name: "Ham", complete: "50%"...}; 设置值。

看看你的数据结构数组更有意义，这样你就可以使用数组方法了。

angular.module('app').controller('AppController', function ($scope, $timeout) {
   $scope.items = [{
            name : "Hamburger",
            complete : "50%",
            start: "2015/09/10 11:00",
            finish: "2015/09/11 04:00",
            work: "8 hours"
        }, ...];

   $scope.items.push({ name: "Ham", complete: "50%"...});    
});

Answer 4

正如您在代码中提到的，它是一个 javascript 对象而不是数组。只有 Array 支持推送。声明你的数组如下：

$scope.items = [
        item1 : {
            name : "Hamburger",
            complete : "50%",
            start: "2015/09/10 11:00",
            finish: "2015/09/11 04:00",
            work: "8 hours"
        },
        item2 : {
            name : "Pasta",
            complete : "50%",
            start: "2015/09/10 11:00",
            finish: "2015/09/11 04:00",
            work: "8 hours"
        },
        item3 : {
            name : "Potato",
            complete : "80%",
            start: "2015/09/10 18:00",
            finish: "2015/09/11 04:00",
            work: "8 hours"
        }
    ];

现在你可以推送新的项目，它不会抛出错误。

将项目动态添加到 ng-repeat 数组 javascript

Dynamically add item to ng-repeat array javascript

javascript

arrays

angularjs

angularjs-ng-repeat

onsen-ui