Question

基本上我有一个调用ng-repeat的登录页面，并显示来自json文件的数据列表，该文件填充了一些动态包含。每个列表项都有一个链接，所有链接都转到同一个post.html页面，标题来自JSON文件。在同一页面上，我想根据JSON文件中的数据包含HTML部分。

我遇到的问题是使用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>

即使一个评估为true而另一个评估为false，也会显示两个包含。有什么想法吗？

http://embed.plnkr.co/qiTkUI/preview

Answer 1

好的，我找到了解决方案：

我试图这样做：

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

改为：

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

正常但收到404错误：获取http://127.0.0.1:59077/blog/angular/angular_blog.html 404（未找到）

一旦我弄明白，我会更新答案。感谢

更新：无错误的工作解决方案

<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-if，ng-switch和dynamic ng-include not working

1 个答案: