Cara menggunakan AngularJS untuk melaksanakan halaman HTML nesting

Cara menggunakan AngularJS untuk melaksanakan halaman HTML nesting_AngularJS

WBOY

Lepaskan： 2016-05-16 15:54:38

asal

2285 orang telah melayarinya

HTML tidak menyokong halaman HTML yang dibenamkan dalam halaman HTML. Laksanakan fungsi ini dengan menggunakan:

Gunakan Ajax - biarkan pelayan memanggil untuk mendapatkan halaman HTML yang sepadan dan tetapkan dalam HTML dalaman kawalan HTML.
Gunakan termasuk bahagian pelayan - JSP, PHP dan teknologi pelayan sebelah web lain boleh memasukkan halaman HTML dalam halaman dinamik.

Menggunakan AngularJS, kita boleh menggunakan arahan ng-include untuk membenamkan satu halaman HTML ke halaman HTML yang lain.

<div ng-app="" ng-controller="studentController">
  <div ng-include="'main.html'"></div>
  <div ng-include="'subjects.html'"></div>
</div>

Salin selepas log masuk

Contoh
tryAngularJS.html

<html>
<head>
<title>Angular JS Includes</title>
<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 Sample Application</h2>
<div ng-app="" ng-controller="studentController">
<div ng-include="'main.html'"></div>
<div ng-include="'subjects.html'"></div>
</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>

Salin selepas log masuk

utama.html

<table border="0">
  <tr><td>Enter first name:</td><td><input type="text" ng-model="student.firstName"></td></tr>
  <tr><td>Enter last name: </td><td><input type="text" ng-model="student.lastName"></td></tr>
  <tr><td>Name: </td><td>{{student.fullName()}}</td></tr>
</table>

Salin selepas log masuk

subjek.html

<p>Subjects:</p>
<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>

Salin selepas log masuk

Output

Untuk menjalankan contoh ini, anda perlu menggunakan textAngularJS.html, main.html dan subjects.html ke pelayan web. Buka textAngularJS.html dalam pelayar web menggunakan URL pelayan. Lihat hasilnya.

2015617101955979.jpg (560×470)