如何在$ scope AngularJS中声明Object

I'm using AngularJS and I'm trying to create a template where I have an implicit object that calls test and inside test I have an array that I want to repeat when I call a function inside my Controller, but I'm getting undefined error when I'm trying do push an object inside the array.

我正在使用AngularJS并且我正在尝试创建一个模板，其中我有一个隐式对象，它调用test和内部测试我有一个数组，我想在我的Controller中调用一个函数时重复，但是我得到了未定义当我尝试在数组中推送一个对象时出错。

Here is the example of my code:

以下是我的代码示例：

<body ng-app="MyApp" ng-controller"MyController">
    <input ng-model="person.name">
    <button ng-click="createPhone()">
    <div data-ng-repeat="phone in person.phones">
        <input ng-model="phone.number">
    </div>
    </div>
</div>

Here is my Controller:

这是我的控制器：

//app.controller...
    $scope.createPhone(){
        var phone = {number: '123456789'};
        $scope.person.phones.push(phone);
    }

I'm getting:

我越来越：

TypeError: Cannot set property 'phones' of undefined.

TypeError：无法设置undefined属性'phones'。

Could anyone help me?

谁能帮助我？

1 个解决方案

#1

You are going to want to do something like this:

你想要做这样的事情：

Example can be seen here - http://jsfiddle.net/hm53pyjp/4/

示例可以在这里看到 - http://jsfiddle.net/hm53pyjp/4/

HTML:

HTML：

<div ng-app>
    <div ng-controller="TestCtrl">
        <input ng-model="person.name" />
            <button ng-click="createPhone()">Create Phone</button>
        <div ng-repeat="phone in person.phones">
            <input ng-model="phone.number" />
        </div>
    </div>
</div>

Controller:

控制器：

Create a person object that you can add things to and create a function to push objects to it. So here I have created a person with the properties name and phones. I have give the name property a value of "User" and the phones property an array of numbers. In this case I have just populated one number to get started.

创建一个可以添加内容的人物对象，并创建一个将对象推送到其中的函数。所以我在这里创建了一个具有属性名称和手机的人。我给name属性一个值为“User”，phone属性为一个数组。在这种情况下，我刚刚填充了一个数字来开始。

The function then gets called on the ng-click and simply pushes an object to the existing phones array.

然后在ng-click上调用该函数，并简单地将对象推送到现有的phone数组。

As you push the objects to the array the ng-repeat will start to update the inputs on the page.

当您将对象推送到数组时，ng-repeat将开始更新页面上的输入。

function TestCtrl($scope) {
    $scope.person = {
        name : "User",
        phones : [{number: 12345}]
    };

    $scope.createPhone = function () {

        $scope.person.phones.push({
            'number' : '111-222'
        });

    };
}

#1