javascript - How to declare Object within $scope AngularJS

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.

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.

Could anyone help me?

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.

Could anyone help me?

Share Improve this question edited Feb 4, 2015 at 14:09 asked Feb 4, 2015 at 13:37 Lucas 1,2714 gold badges17 silver badges34 bronze badges

Well you haven't defined $scope.a, at least not from your code snippet. can you share your whole controller code please? Also your createB function is not defined correctly, it should follow the syntax of $scope.createB = function() {} – mindparse Commented Feb 4, 2015 at 13:44
In my controller I really haven't defined the $scope.a, but how can I declare with the b object? – Lucas Commented Feb 4, 2015 at 13:46
1 The html you have posted is incorrect. Where is the ng-controller? Are you using "controller as"? Why are you mixing data- prefixes in? Where is "test" defined? Have you defined $scope.a and $scope.b? I would post your whole controller so we can see what you are doing. – haxtbh Commented Feb 4, 2015 at 13:47
Well you need to define $scope.a so you can assign a b property to it. Your code is confusing, what exactly are you trying to achieve, what sort information are you trying to display in the UI? – mindparse Commented Feb 4, 2015 at 13:48
Im guessing you are just trying to do something like this - jsfiddle.net/hm53pyjp/2 – haxtbh Commented Feb 4, 2015 at 14:07

| Show 5 more comments

1 Answer 1

Sorted by: Reset to default 15

You are going to want to do something like this:

Example can be seen here - 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:

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.

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

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

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

    $scope.createPhone = function () {

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

    };
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to declare Object within $scope AngularJS - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)