【发布时间】：2016-01-20 09:30:17
【问题描述】：
基本上，我有一个登录页面，它调用 ng-repeat 并显示来自 json 文件的数据列表，该文件填充了一些动态包含。每个列表项都有一个链接，它们都指向同一个 post.html 页面，标题来自 JSON 文件。在同一页面上，我想包含一个基于 JSON 文件数据的 HTML 部分。
我遇到的问题是使用 ng-include 和 ng-if 以及 JSON 文件中的值。两者都包括 show 尽管表达式不同并且评估不同。
一些代码sn-ps：
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>
即使一个计算结果为真而另一个计算结果为假，两个包含也会显示。有什么想法吗？
【问题讨论】：
-
已经回答here
-
看了一下这个例子，ng-switch 可能是我要找的，但是这个例子有点不同，因为我的点击导致了一个带有动态标题的新路由，所以内容会一起加载而不是那个例子。谢谢你，不过我会看看我是否可以让它为我工作:)
-
我已经编辑了这个问题，希望它更清楚一点。
-
我还不清楚。你说你想在
post.html中包含一个 html 部分，并且你在代码中使用ng-switch这样做了。但是你还是不开心。但是，究竟，您要达到什么目的呢？ -
@frhd ng-switch 无法正常工作，因为我希望对范围问题进行处理。因为它取决于输入字段中 JSON 文件的值。
标签： javascript html json angularjs