-1
基本上我有一個登陸頁面，它調用ng-repeat並顯示一個json文件中的數據列表，它填充了一些動態包含。每個列表項都有一個鏈接，所有鏈接都轉到相同的post.html頁面，標題來自JSON文件。在同一頁面上，我想根據JSON文件中的數據包含HTML部分。ng-if，ng-switch和dynamic ng-include不起作用
我遇到的問題是使用ng-include與ng-if與來自JSON文件的值。儘管表達不同，評估也不同，
一些代碼片段：
app.js
// Code goes here
/*global $:false, angular:false, applyResize:false, menu:false*/
/*jslint browser: true, devel: true */
(function() { //clousure
'use strict';
var app = angular.module('site', ['ngRoute']),
menu = {
home: 'Home',
angular: 'Angular'
};
/* CONFIG
===============================================================*/
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/home.html',
controller: 'mainController'
}).otherwise({
redirectTo: '/'
})
.when('/angular', {
templateUrl: 'pages/angular.html',
controller: 'postController'
})
.when('/blog/:id', {
templateUrl: 'blog/post.html',
controller: 'blogsController'
})
});
/* CONTROLLERS
=================================================================*/
//Home/Main Controller
app.controller('mainController', ['$scope', '$log', '$location', function($scope, $log, $location) {
$log.info($location.path());
}]);
app.controller('MenuController', function() {
this.product = menu;
});
app.controller('postController', ['$scope', '$http', function($scope, $http) {
$http.get('data/angular_posts.json').success(function(data) {
$scope.posts = data;
});
}]);
//Blog Controller
app.controller('blogsController', ['$scope', '$log', '$location', '$http', '$routeParams', function($scope, $log, $location, $http, $routeParams) {
$http.get('data/angular_posts.json').success(function(data) {
$scope.post = data[$routeParams.id];
});
$scope.x = "true";
}]);
/* DIRECTIVES
=================================================================*/
app.directive('menuDirective', [])
.directive('myMenu', function() {
return {
restrict: 'E',
replace: 'true',
templateUrl: 'directives/menu.html',
scope: {
menuName: "@"
}
};
});
}());
JSON
[
{
"title": "Animations in Angular - Part 1",
"summary": "Getting started with Angular Animations is relatively simple. So let's take a look at a simple example to get you started.",
"article": "yes",
"url": "blog/angular/angular_blog1.html",
"index": "0"
},
{
"title": "Angular 2.0 - What you need to know",
"summary": "Work in progress!",
"article": "yes",
"url": "blog/angular/angular_blog1.html",
"index": "1"
}
]
post.html
<h1>{{post.title}}</h1>
<input ng-model="index" value={{post.index}} hidden>
{{post.index==0}}
<div ng-if='"{{post.index == 0}}"'>
{{post.index==0}} **//Evaluates to True**
<div ng-include="'blog/angular/angular_blog1.html'"></div>
</div>
<div ng-if='"{{post.index == 1}}"'>
{{post.index==1}} **//Evaluates to False**
<div ng-include="'blog/angular/angular_blog2.html'"></div>
</div>
即使一個評估爲真，另一個評估爲假，也會顯示兩個包含。有任何想法嗎？
http://embed.plnkr.co/qiTkUI/preview
已經回答[這裏]（工作液http://stackoverflow.com/questions/16649617/angularjs-change-partial-in-controller-on-點擊） – supafabulous
看看這個例子，ng-switch可能是我正在尋找的，但是這個例子有點不同，因爲我的點擊導致帶有動態標題的新路由，所以內容將被加載在一起，而不是這個例子。謝謝，但我會看看我是否可以讓它爲我工作:) – Paul
我編輯了這個問題，希望它更清楚一點。 – Paul