how to add multiple div within one div using angular.js

Question

I am new to Anjular.js. I just started to learn today so I hope all you can help me.

I have html file like this:

<div ng-conrtoller="add">
  <div >
    <div>{{ username }}</div>
  <div>
  <input type="text" ng-model="name">
  <button ng-click="addname">save</button>
</div>

In controller.js file :

app.controller("add",function($scope)
{
    $scope.addname=function()
    {
        $scope.username=$scope.name;
    } 
});

When I click on save button after I enter text into text filed, the entered text will be displayed within one div. If I again do the same, the name will be replaced but I want to display previously entered text as well as any text entered in the future.

Thanks.

Answer 1

i want to display previously entered text as well as in future enter text

You can use array to store multiple items, push items to array and use ngRepeat

HTML

<div>
    <div ng-repeat="username in usernames">{{ username }}</div>
<div>
<input type="text" ng-model="name">
<button ng-click="addname()">save</button>

JS

$scope.usernames = [] ;
$scope.addname=function()      {
    $scope.usernames.push($scope.name);
    $scope.name = "";
} 

Working Demo

Currently use only unique items for testing