搜索文档
首页
HTML/CSS
JavaScript
服务端开发
Java教程
移动端
数据库
当前位置:
首页
JavaScript
AngularJS 教程
AngularJS 基础教程
源代码
清空
点击运行
<html> <head> <title>Angular JS Modules</title> <script src = "https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js"></script> <script src = "/run/angularjs/src/module/mainApp.js"></script> <script src = "/run/angularjs/src/module/studentController.js"></script> <style> table, th , td { border: 1px solid grey; 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 模块使用示例</h2> <div ng-app = "mainApp" ng-controller = "studentController"> <table border = "0"> <tr> <td>输入名字:</td> <td><input type = "text" ng-model = "student.firstName"></td> </tr> <tr> <td>输入姓氏: </td> <td><input type = "text" ng-model = "student.lastName"></td> </tr> <tr> <td>姓名: </td> <td>{{student.fullName()}}</td> </tr> <tr> <td>科目:</td> <td> <table> <tr> <th>名称</th> <th>分数</th> </tr> <tr ng-repeat = "subject in student.subjects"> <td>{{ subject.name }}</td> <td>{{ subject.marks }}</td> </tr> </table> </td> </tr> </table> </div> </body> </html>
运行结果