NG-如果NG-开关和动态NG-包括不工作 [英] ng-if, ng-switch and dynamic ng-include not working

问题描述

基本上我有一个调用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?

http://embed.plnkr.co/qiTkUI/$p$pview

推荐答案

好，我找到了解决方法：

Ok I found a solution:

我试图做到这一点：

  <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错误：GET http://127.0.0.1:59077/博客/角/ angular_blog.html 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-包括不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！