function PeopleCtrl($scope) { $scope.people = [ {firstName: 'John', lastName: 'Doe', address: {city: 'Chandler', state: 'AZ', zip: 85248}}, {firstName: 'Jane', lastName: 'Doe', address: {city: 'Chandler', state: 'AZ', zip: 85248}}, {firstName: 'Johnny', lastName: 'Doe', address: {city: 'Phoenix', state: 'AZ', zip: 85003}} ]; $scope.addNew = function(person) { $scope.people.push(person); $scope.person = {}; //clear out person object } }
<div ng-app> <span class="bold">Binding to a Controller</span> <br /> <span>This demo shows how to interact with a controller.</span> <br /><br /> <div ng-controller="PeopleCtrl"> <div id="peopleContainer"> People:<br /><br /> <ul> <li ng-repeat="person in people"> <span class="bold">{{person.firstName}} {{person.lastName}}</span> <br /> {{person.address.city}}, {{person.address.state}} {{person.address.zip}} </li> </ul> </div> <div> <br /> <span class="bold">Add New Person:</span> <br /><br /> <table style="width: 400px;padding:10px;"> <tr> <td style="width: 30%;">First Name:</td> <td style="width: 70%;"><input type="text" ng-model="person.firstName" /></td> </tr> <tr> <td style="width: 30%;">Last Name:</td> <td style="width: 70%;"><input type="text" ng-model="person.lastName" /></td> </tr> <tr> <td style="width: 30%;">City:</td> <td style="width: 70%;"><input type="text" ng-model="person.address.city" /></td> </tr> <tr> <td style="width: 30%;">State:</td> <td style="width: 70%;"><input type="text" ng-model="person.address.state" /></td> </tr> <tr> <td style="width: 30%;">Zip:</td> <td style="width: 70%;"><input type="text" ng-model="person.address.zip" /></td> </tr> <tr> <td colspan="2"> <button data-ng-click="addNew(person)">Add</button> </td> </tr> </table> </div> </div> </div>
table { border-collapse: collapse; border-spacing: 0px; } table td { padding: 8px 8px; } .bold { font-weight:bold; }