Heim > Artikel > Web-Frontend > So verwenden Sie AngularJS zum Implementieren der HTML-Seitenschachtelung_AngularJS

So verwenden Sie AngularJS zum Implementieren der HTML-Seitenschachtelung_AngularJS

WBOYOriginal: 2016-05-16 15:54:382260Durchsuche

HTML unterstützt keine in HTML-Seiten eingebetteten HTML-Seiten. Implementieren Sie diese Funktionalität mit:

Verwenden Sie Ajax – lassen Sie einen Serveraufruf die entsprechende HTML-Seite abrufen und im innerHTML des HTML-Steuerelements festlegen.
Verwenden Sie serverseitige Includes – JSP, PHP und andere webseitige Servertechnologien können HTML-Seiten in dynamische Seiten einbinden.

Mit AngularJS können wir die ng-include-Direktive verwenden, um eine HTML-Seite in eine andere HTML-Seite einzubetten.

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

Beispiel
versuchen SieAngularJS.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>

main.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>

subjects.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>

Ausgabe

Um dieses Beispiel auszuführen, müssen Sie textAngularJS.html, main.html und subject.html auf einem Webserver bereitstellen. Öffnen Sie textAngularJS.html in einem Webbrowser über die Server-URL. Sehen Sie sich die Ergebnisse an.

2015617101955979.jpg (560×470)

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Das JQuery-Plug-In „SplitScren“ implementiert die Vorlage „effects_jquery“ für den Seiten-Split-Screen-WechselNächster Artikel：Das JQuery-Plug-In „SplitScren“ implementiert die Vorlage „effects_jquery“ für den Seiten-Split-Screen-Wechsel

In Verbindung stehende Artikel

Mehr sehen