how to add row dynamically in angular .js on button click?

Question

I am creating a list view in angular.js when I take static data I am able to create list .as In given fiddle.http://jsfiddle.net/65Cxv/50/.But I need to generate row dynamically in other word I need to create row when user click button.I need to create list having same text Example ("List") but different ID like ("0","1","2"...etc).can it is possible to generate a list ..?here I am trying to do ..

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<button type="button" class="btn btn-primary">Primary</button>
<ul ng-controller="ListController">
    <li>
        <a ng-click=></a>
    </li>
</ul>



</body>

</html>

JS Code:

var myApp = angular.module('myApp',[]);

myApp.controller('ListController', function($scope) {
  alert('--')
]);

charlietfl · Accepted Answer · 2014-07-27 23:40:28Z

1

You add to the data model by pushing new objects to your data array.:

$scope.items = [
    {name: 'item1', content: 'content1'},
    {name: 'item2', content: 'content2'},
    {name: 'item3', content: 'content3'}
];
/* bind this to `ng-model` of 2 inputs in html*/
$scope.activeItem={ name: '', content:''}

$scope.addItem=function(){
   $scope.items.push( $scope.activeItem);
   $scope.activeItem={} /* reset active item*/

}

In html use

<button ng-click="addItem()">Add</button>

DEMO

edited Jul 27, 2014 at 23:40

answered Jul 27, 2014 at 23:35

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Pallavi Sharma Over a year ago

great answer can we give Id to each row ..So that I will get click event row..mean I need to show I ID alert when I click to row..jsfiddle.net/65Cxv/52

charlietfl Over a year ago

sure, object can have any properties you want. Go through tutorial on angular documentation site. WIll learn a lot of the basics there. Is well worth the time spent

Pallavi Sharma Over a year ago

@charlietfi can you change fiddle..along with I am studying with documentation

Pallavi Sharma Over a year ago

thanks exactly ....why you didn't take id in this as parameter $scope.activeItem = { name: '', content: '' }

charlietfl Over a year ago

i added it in addItem ...create one then click on it. Would be somewhat simlar to making a request to server then adding it

Collectives™ on Stack Overflow

how to add row dynamically in angular .js on button click?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related