javascript - 如何在 $scope AngularJS 中声明对象

标签 javascript angularjs

我正在使用 AngularJS 并且我正在尝试创建一个模板,其中我有一个调用 test 的隐式对象并且在 test 内部我有一个我想要的数组当我在我的 Controller 中调用一个函数时重复,但是当我尝试将一个对象插入数组时我得到了未定义的错误

这是我的代码示例:

<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>

这是我的 Controller :

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

我得到:

TypeError: Cannot set property 'phones' of undefined.

谁能帮帮我?

最佳答案

你会想要做这样的事情:

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

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 :

创建一个 person 对象,您可以向其添加内容,并创建一个将对象推送到其中的函数。 所以在这里我创建了一个 person 属性 namephones。我为 name 属性赋予了“User”的值,为 phones 属性赋予了一个数字数组。在本例中,我只填充了一个数字即可开始。

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

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

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

    $scope.createPhone = function () {

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

    };
}

关于javascript - 如何在 $scope AngularJS 中声明对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28322807/

相关文章:

javascript - 无论有效的测试值如何,正则表达式始终返回始终为真或始终为假

JavaScript:调用启动类的变量函数(数据包处理程序)

javascript - 通过单选按钮选择一行时,将一行数据复制到同一页面的文本字段

javascript - TypeError : element. summernote 不是函数

javascript - 如何在 Jasmine 中模拟 DOM 元素以便 Controller 可以访问它?

javascript - 使用 javascript 分割文本而不丢失数据

javascript - 将文件写入设备

javascript - 如何返回Parse Query结果进行查看?

javascript - Angularjs 将变量传递给具有继承(非隔离)范围的指令

javascript - ChartJS 折线图 - 删除线条下方的颜色