Question

我曾经使用过jquery，很容易操作dom甚至隐藏一些内容并在容器内显示另一个内容。在Angularjs中需要帮助才能实现类似于按钮单击时在容器内显示或隐藏模板的内容。

我的主要报告页面

<div style="margin-left:25px;margin-bottom:10px">
    <button class="btn glyphicon glyphicon-stats" ng-click="showChartView()"></button>
    <button class="btn glyphicon glyphicon-th-list" ng-click="showTableView()"></button>
</div>
<div class="row" style="width:100%; margin:0px">
    <!--Chart or Table view-->
    <div class="col-md-10" style="width:70%;margin-right:0px" id="container">

    </div>
    <!--Filter-->
    <div class="col-md-2" style="width:30%;margin-left:0px">
        <div ng-include='"templates/reports/filters.html"'></div>
    </div>
</div>

$scope.showChartView = function() {
    //should display charttemplate.html inside container
}

$scope.showTableView = function() {
    //should display tabletemplate.html inside container
}

enter image description here

Answer 1

在Angularjs中需要帮助来实现类似于显示或隐藏的东西   按钮单击容器内的模板。

默认情况下如何加载图表视图？

只需在按钮操作中添加隐藏/显示？
  你能给我举个例子吗。我是Angularjs的新人

1）使用ng-include，ng-click，ng-show，ng-hide

这对我有用：

app.js：

var app = angular.module('myApp', []);

app.controller('MyCtrl', ['$scope', function ($scope) {
  $scope.should_show_chart = true;
}]);

的index.html：

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
  <title>AngularJS</title>

  <meta charset="UTF-8">  <!-- For html5 (default is UTF-8) -->
  <meta name="viewport" content="width=device-width, initial-scale=1">  <!-- For Bootstrap -->

  <!-- Bootstrap CSS with glyphicon fonts in bootstrap/fonts/ -->
  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
  </head>

<body ng-controller="MyCtrl" class="container">

<div>
  <button type="button" 
          class="btn btn-default" 
          ng-click="should_show_chart=true">

    <span class="glyphicon glyphicon-stats" 
          aria-hidden="true"></span>
  </button>

  <button type="button" 
          class="btn btn-default"
          ng-click="should_show_chart=false">

    <span class="glyphicon glyphicon-th-list" 
          aria-hidden="true"><span>
  </button>
</div>


<div class="row">

  <!--Chart or Table view-->
  <div ng-include="'chart.html'"  *****NOTE THE INTERIOR SINGLE QUOTES****
       ng-show="should_show_chart"  **ng-show explained below
       class="col-md-6" 
       id="container">
  </div>

  <div ng-include="'table.html'"  ****NOTE THE INTERIOR SINGLE QUOTES****
       ng-hide="should_show_chart" ***ng-hide explained below
       class="col-md-6" 
       id="container">
  </div>

</div>


<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<!-- App Script -->
<script src="app.js"></script>

</body>
</html>

chart.html：

<h3>Chart</h3>

table.html：

<h3>Table</h3>

如果ng-show是真值，则标签可见;如果ng-hide是真值，则隐藏标记。

请注意，根据Bootstrap文档：

图标类...不应与其他类一起使用元件。而是添加嵌套的<span>并应用图标类 <span>。

出于可访问性原因，您应该添加属性：

aria-hidden="true"

指向指定glyphicon类的标记。

http://getbootstrap.com/components/

2）使用angular-ui-router

...需要链接到其他js脚本：

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.min.js"></script>

的index.html：

<!DOCTYPE html>
<html ng-app="myApp">

<head>
   <title>AngularJS with UI-Router</title>

  <meta charset="UTF-8">  <!-- For html5 (the default is UTF-8) -->
  <meta name="viewport" content="width=device-width, initial-scale=1">  <!-- For Bootstrap -->

  <!-- Bootstrap CSS with glyphicon fonts in bootstrap/fonts/ -->
  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>

<body class="container">

<div>

  <a class="btn btn-default" 
     ui-sref="chart"  ***Adds an href attribute to the <a> tag consisting of '#' plus the url corresponding to the chart 'state'(see app.js). 
     ui-sref-active="active">  ***When the chart 'state' is activated, the specified class is added to the class attribute 
    <span class="glyphicon glyphicon-stats" 
          aria-hidden="true"></span>
  </a>

  <a class="btn btn-default"
     ui-sref="table"  ***Adds an href attribute to the <a> tag consisting of '#' plus the url corresponding to the table 'state'(see app.js)
     ui-sref-active="active">  ***When the table 'state' is activated, then the specified  class is added to the class attribute 


    <span class="glyphicon glyphicon-th-list" 
          aria-hidden="true"><span>
  </a>

</div>

<!--Chart or Table view-->
<div ui-view></div>   ***TEMPLATES ARE INSERTED HERE DEPENDING ON WHAT STATE IS ACTIVE****

<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<!-- Angular-UI-Router -->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.min.js"></script>
<!-- App Script -->
<script src="app.js"></script>

</body>
</html>

app.js：

var app = angular.module('myApp', ['ui.router']);

app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {

  //Set the default route, which will load the associated state:
  $urlRouterProvider.otherwise('/chart');

  //Define the states:
  $stateProvider
    .state('chart', {
      url: '/chart',
      templateUrl: 'chart.html'
    })

    .state('table', {
      url: '/table',
      templateUrl: 'table.html'
    });

}]);

3）使用ng-switch，ng-include（按照xe4me＆＃39;答案）：

的index.html：

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
  <title>AngularJS</title>

  <meta charset="UTF-8">  <!-- For html5 (default is UTF-8) -->
  <meta name="viewport" content="width=device-width, initial-scale=1">  <!-- For Bootstrap -->

  <!-- Bootstrap CSS with glyphicon fonts in bootstrap/fonts/ -->
  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
  </head>

<body class="container">

<div>
  <button type="button" 
          class="btn btn-default" 
          ng-click="should_display='chart'">

    <span class="glyphicon glyphicon-stats" 
          aria-hidden="true"></span>
  </button>

  <button type="button" 
          class="btn btn-default"
          ng-click="should_display='table'">

    <span class="glyphicon glyphicon-th-list" 
          aria-hidden="true"><span>
  </button>
</div>


<div class="row">
  <!--Chart or Table view-->
  <div ng-switch="should_display">
    <!-- should_display is only assigned a value after a button is clicked-->
    <div ng-switch-default
         ng-include="'chart.html'" 
         class="col-md-6" 
         id="container">
    </div>

    <div ng-switch-when="chart"
         ng-include="'chart.html'" 
         class="col-md-6" 
         id="container">
    </div>

    <div ng-switch-when="table"
         ng-include="'table.html'"  
         class="col-md-6" 
         id="container">
    </div>

  </div>
</div>


<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<!-- App Script -->
<script src="app.js"></script>

</body>
</html>

app.js：

var app = angular.module('myApp', []);

您可以使用控制器设置<div>的初始值，而不是使用ng-switch-default should_display属性来显示默认视图。为此，请删除包含<div>属性的ng-switch-default，然后将ng-controller="MyCtrl"添加到<body>标记，并将app.js更改为：

var app = angular.module('myApp', []);

app.controller('MyCtrl', ['$scope', function ($scope) {
  $scope.should_display = 'chart';
}]);

Answer 2

您最好的选择是使用ng-include directive并将当前使用的模板网址放入范围变量中。

<div ng-include="view"></div>

然后使用简单的作业

更改显示的视图

$scope.showChartView = function () {
    $scope.view = '/path/to/chartView.fragment.html';
};

Answer 3

我认为最好的方法是使用ng-switch，你可以使用ng-include并只需点击一下即可更改内容。你可以在这里查看我的答案：

ng-switch

如何在按钮点击时使用模板更改div的内容？

3 个答案:

1）使用ng-include，ng-click，ng-show，ng-hide

2）使用angular-ui-router

3）使用ng-switch，ng-include（按照xe4me＆＃39;答案）：