[英]How to include one html file in an html with angularjs
我的主要html頁面在index.html下面給出
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="ISO-8859-1">
<title>Demo</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/controllers/app.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
<div class="container" ng-controller="AppCtrl">
<h1>AngulAir</h1>
<div>
<ul>
<li ng-repeat="airport in airports">
<a href="" ng-click="setAirport(airport.code)">{{airport.code}}-{{airport.city}}</a>
-<a href="" ng-click="editAirport(airport.code)">Edit</a>
</li>
</ul>
<p ng-show="currentAirport">currentAirport:{{currentAirport.name}}</p>
</div>
<p ng-show="editing.name"><input type="text" ng-model="editing.name" value=""/></p>
<div ng-include="sidebyURL"></div>
<div ng-include="formURL"></div>
</div>
</body>
</html>
我正在使用下面的app.js給出的javascript文件,該文件位於js / controllers文件夾中
function AppCtrl($scope) {
$scope.airports = {
"PDX" : {
"code" : "PDX",
"name" : "Portland International Airport",
"city" : "Portland",
"destinations" : [ "LAX", "SFO" ]
},
"STL" : {
"code" : "STL",
"name" : "Lampbert-St. Louis International Airport",
"city" : "St. Louis",
"destinations" : [ "LAX", "MKE" ]
},
"MCI" : {
"code" : "MCI",
"name" : "Kansas City International Airport",
"city" : "Kansas City",
"destinations" : [ "SFO", "LAX" ]
},
};
$scope.currentAirport=null;
$scope.sidebyURL='partials/airport.html';
$scope.formURL='partials/form.html';
$scope.setAirport = function(code) {
$scope.currentAirport = $scope.airports[code];
};
$scope.editAirport = function(code) {
$scope.editing = $scope.airports[code];
};
}
我在主index.html文件中包括2個html文件,其中2個文件airport.html是
<div ng-show="currentAirport">
<h3>{{currentAirport.name}}</h3>
<h4>Destinations</h4>
<ul>
<li ng-repeat="destination in currentAirport.destinations">
{{destination}}
</li>
</ul>
</div>
而另一個form.html是
<div ng-show="editing">
<h3>Edit Airport</h3>
<input type="text" ng-model="editing.name" value=""/>
</div>
我剩下的2個html文件都存在於partials文件夾中,並且在執行index.html時,如果您有關於這些的任何想法,則無法在form.html和airport.html中包含這些信息,請告訴我。 ...
您是否實際設置了scope.editing
和scope.currentAirport
以便ng-show
返回true? 我已經將您的代碼復制並粘貼到了plunker並按預期工作
List: <button ng-repeat="airport in airports" ng-click="setAirport(airport.code)">{{airport.code}}</button>
Edit: <button ng-repeat="airport in airports" ng-click="editAirport(airport.code)">{{airport.code}}</button>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.