路由 - Ng -hide，Ng-show AngularJS

Question

我有一個基本的HTML文件儀表板。在儀表板中，我包含一個包含菜單的標題HTML文件。 。內容tml文件。使用ng-include的頁腳HTML文件。 現在我想單擊標題HTML文件上的菜單。在點擊HTML內容後，應該隱藏一個名爲equity的新HTML頁面。點擊菜單如何實現這一點。幫幫我 。是新來的angularjs

Answer 1

你可以使用ngRoute來實現這一點。 而不是ng-include，使用ng-view作爲內容。 在$routeProvider中分別定義初始內容和權益頁面。點擊鏈接，使用href轉到權益頁面。

Answer 2

承擔路由，並在在angularjs NG-觀點我把一個簡單的例子這裏

這裏看看去你的js

var app = angular.module('yiiframe-routingApp', ['ngRoute']); 
    app.config(['$routeProvider', 
     function($routeProvider) { 
     $routeProvider. 
     when('/', { 
      title: 'users', 
      templateUrl: 'list-users.html', 
      controller: 'userController' 
     }) 
     .otherwise({ 
      redirectTo: '/' 
     });; 
    }]); 

app.controller('userController', function ($scope) { 
    $scope.columns = [ 
     {text:"ID",predicate:"id",sortable:true,dataType:"number"}, 
     {text:"Name",predicate:"name",sortable:true}, 
     {text:"Email",predicate:"email",sortable:true}, 
     {text:"Gender",predicate:"gender",sortable:true}, 
     {text:"Address",predicate:"address",reverse:true,sortable:true}, 
    ]; 
     $scope.users = [ 
      {ID: '1', name: 'Kuldeep Dangi', email: 'kuldeep.dangi@yiiframe.com', gender: 'Male', address: '3172/49 Faridabad'}, 
      {ID: '2', name: 'Aditi', email: 'aditi@yiiframe.com', gender: 'Female', address: 'Faridabad'}, 
      {ID: '3', name: 'Nitin', email: 'nitin@yiiframe.com', gender: 'Male', address: 'Faridabad'}, 
      {ID: '4', name: 'Karan', email: 'karan@yiiframe.com', gender: 'Male', address: 'Faridabad'}, 
      {ID: '5', name: 'Sachita Sharma', email: 'sachita@yiiframe.com', gender: 'Female', address: 'Delhi'}, 
      {ID: '6', name: 'Seema Pal', email: 'seema@yiiframe.com', gender: 'Female', address: 'Delhi'}, 
      {ID: '7', name: 'Nikhil', email: 'nikhil@yiiframe.com', gender: 'Male', address: 'Faridabad'}, 
      {ID: '8', name: 'Naveen', email: 'naveen@yiiframe.com', gender: 'Male', address: 'Faridabad'}, 
      {ID: '9', name: 'Hemraj', email: 'hemraj@yiiframe.com', gender: 'Male', address: 'Faridabad'}, 
      {ID: '10', name: 'Mohit', email: 'mohit@yiiframe.com', gender: 'Male', address: 'Faridabad'}, 
     ]; 
    }); 

這裏會去你的主要layoutfile

<div class="container"> 
     <div class="page-content"> 
      <div ng-view="" id="ng-view"></div> 
     </div> 
</div> 

，這裏是你的列表users.html

<table class="table table-striped"> 
    <tr><th ng-repeat="c in columns">{{c.text}}</th></tr> 

    <tr ng-repeat="u in users | orderBy:'-id_user'" id="{{u.id_user}}"> 
     <td>{{u.id_user}}</td><td>{{u.name}}</td><td>{{u.email}}</td><td>{{u.gender}}</td><td>{{u.address}}</td> 
    </tr> 
</table>