<Html> <Head> <Title> Angular JS Table </title> <Style> Table, th, td { Border: 1px solid gray; Border-collapse: collapse; Padding: 5px; } Table tr: nth-child (odd ){ Background-color: # f2f2f2; } Table tr: nth-child (even ){ Background-color: # ffffff; } </Style> </Head> <Body> <H2> AngularJS Sample Application <Div ng-app = "" ng-controller = "studentController"> <Table border = "0"> <Tr> <td> Enter first name: </td> <input type = "text" ng-model = "student. firstName "> </td> </tr> <Tr> <td> Enter last name: </td> <input type = "text" ng-model = "student. lastName "> </td> </tr> <Tr> <td> Name: </td> <td >{{ student. fullName () }}</td> </tr> <Tr> <td> Subject: </td> <td> <Table> <Tr> <Th> Name </th> <Th> Marks </th> </Tr> <Tr ng-repeat = "subject in student. subjects"> <Td >{{ subject. name }}</td> <Td >{{ subject. marks }}</td> </Tr> </Table> </Td> </tr> </Table> </Div> <Script> Function studentController ($ scope ){ $ Scope. student = { FirstName: "Mahesh ", LastName: "Parashar ", Fees: 500, Subjects :[ {Name: 'physics ', marks: 70 }, {Name: 'chemistry ', marks: 80 }, {Name: 'Math', marks: 65 }, {Name: 'English ', marks: 75 }, {Name: 'hindi ', marks: 67} ], FullName: function (){ Var studentObject; StudentObject = $ scope. student; Return studentObject. firstName + "" + studentObject. lastName; } }; } </Script> <Script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </Body> </Html> |