I have put all necessary files into a single file. I want to push item into array when the user clicks on a button. Here is the content:

When I click on the button, nothing happens. Also the data is not repeated/looped and {{}} is shown in angular which means there is a problem.

<script type="text/javascript" src="angular.js" ></script>
        <div data-ng-app="App">
            <div data-ng-controller="MyController">
                <ul data-ng-repeat="one in names">
                    <li>{{ one.first }}</li>
                </ul>
            </div>
        </div>

        <input type="text" data-ng-model="Namer.name"/>
        <input type="submit" data-ng-click="AddName()"/>


<script type="text/javascript">
    var App = angular.module("App", []);

    App.controller("MyController", function($scope){
        $scope.names = [
            { first : "Thomas"},
            { first  : "Geferson"},
            { first  : "Jenny"},
            { first  : "Maria"},
        ];

        $scope.AddName = function(){
            $scope.names.push({
                name : $scope.Namer.name;
            });
        };
    });
</script>

I have put all necessary files into a single file. I want to push item into array when the user clicks on a button. Here is the content:

When I click on the button, nothing happens. Also the data is not repeated/looped and {{}} is shown in angular which means there is a problem.

<script type="text/javascript" src="angular.js" ></script>
        <div data-ng-app="App">
            <div data-ng-controller="MyController">
                <ul data-ng-repeat="one in names">
                    <li>{{ one.first }}</li>
                </ul>
            </div>
        </div>

        <input type="text" data-ng-model="Namer.name"/>
        <input type="submit" data-ng-click="AddName()"/>


<script type="text/javascript">
    var App = angular.module("App", []);

    App.controller("MyController", function($scope){
        $scope.names = [
            { first : "Thomas"},
            { first  : "Geferson"},
            { first  : "Jenny"},
            { first  : "Maria"},
        ];

        $scope.AddName = function(){
            $scope.names.push({
                name : $scope.Namer.name;
            });
        };
    });
</script>

• javascript
• angularjs

• You're using the property name first in the initial names array, but pushing in an object with the name in a property called name in the AddName function. That should be first: $scope.Namer.name; to match your existing schema. – Dave Ward Commented May 10, 2014 at 8:46
• sorry I didn't get your point..which line should edited? – Mostafa Talebi Commented May 10, 2014 at 8:48

2 Answers 2

Working DEMO

var App = angular.module("App", []);

App.controller("MyController", function ($scope) {
    $scope.names = [{
        first: "Thomas"
    }, {
        first: "Geferson"
    }, {
        first: "Jenny"
    }, {
        first: "Maria"
    }];

    $scope.AddName = function () {
        $scope.names.push({
            first: $scope.Namer.name
        });
    };
});

You need to move your data-ng-click inside Controller.Also you had some syntax issues.That is also i fixed (To work with IE ALSO)

<div data-ng-app="App">
    <div data-ng-controller="MyController">
        <ul data-ng-repeat="one in names">
            <li>{{ one.first }}</li>
        </ul>
        <input type="text" data-ng-model="Namer.name" />
        <input type="submit" data-ng-click="AddName()" />
    </div>
</div>

Move your inputs to inside your MyController so that it executes code in the scope created by the controller:

<div data-ng-app="App">
     <div data-ng-controller="MyController">
         <ul data-ng-repeat="one in names">
                    <li>{{ one.first }}</li>
          </ul>

          <input type="text" data-ng-model="Namer.name"/>
          <input type="submit" data-ng-click="AddName()"/>
      </div>
 </div>

Another mistake is that you need to change name to first to match with your existing object

$scope.AddName = function(){
        $scope.names.push({
            first : $scope.Namer.name //change to first and remove the ;
        });
 };

DEMO