问题描述
基本上我有一个调用NG重复和显示从其填充一些动态包括一个JSON文件数据列表的目标网页。每个列表项都有一个链接，都去同一个post.html页面标题从JSON文件来了。在同一页面上我想包括基于来自JSON文件中的数据部分的一个HTML。
Basically I have a landing page that calls ng-repeat and displays a list of data from a json file which populates some dynamic includes. Each list item has a link that all go to the same post.html page with the title coming from the JSON file. On that same page I want to include a HTML partial based on the data from the JSON file.
我正在使用时遇到的问题纳克 - 包括与纳克-如果与从JSON文件的值。包括两个展会虽然前pression是不同的，不同的评价。
The problem I am having is using ng-include with ng-if with the value from JSON file. Both includes show though the expression is different and evaluate differently.
有些code片段：
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>
即使一个计算结果为真，其他计算结果为false既包括所示。任何想法？
Even though one evaluates to true and the other evaluates to false both includes are shown. Any ideas?
404（未找到）
将更新的答案一旦我想通了。谢谢
Will update the answer once I have figured it out. Thanks
更新：没有错误的可行的解决方案
<div ng-if="post.index">
<ng-switch on="post.index">
<ng-switch-when="'0'" ng-include="'blog/angular/angular_blog' + post.index + '.html'">
<ng-switch-when="'1'" ng-include="'blog/angular/angular_blog' + post.index + '.html'">
</ng-switch>
</div>
这篇关于NG-如果NG-开关和动态NG-包括不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！