Question

我想在内容div中显示一些数据和表格，这取决于您在左侧导航中选择的类别。因此，如果我更改类别，内容div的显示内容也应该更改。

以下是Plunkr上的代码。

但似乎即使是这个简单的例子也不起作用。

所以我有两个问题：

1.。）如何修复此示例代码才能运行？

但更重要的是：

2。）更改类别时是否有更好的方法来更改内容div？

Answer 1

我删除了这个＆＃39;代码中的元素，并将ng-view更改为ng-show。

<div>
  <div ng-show="showApple">{{content}}</div>
  <div ng-show="showBanana">{{content}}</div>
  <div ng-show="showOrange">{{content}}</div>
</div>

你命名你的div类＆＃34;内容＆＃34;有什么问题。所以我也把它删除了。

我相信它不是一个完美的解决方案，但现在它可行。

link to plnkr

Answer 2

说实话，你最好的选择是使用$ states / views。通过内容div上的data-ui-view和菜单上按钮上的data-ui-sref链接，您可以轻松切换内容。请查看ui-router页面以更好地了解它。使用菜单点击的每个“视图”模板，您的代码不仅易于管理，而且可能更容易理解。

Answer 3

您可以使用ng-include来显示您的内容，但您必须将它们保存在单独的文件中，例如contentForApple，contentForBanana和contentForOrange。在这里，我可以向你展示你的div的一点变化

  <div class="content">
    <div ng-show="MainCtrl.showApple" ng-include ="'contentForApple.html'"></div>
    <div ng-show="MainCtrl.showBanana" ng-include = "'contentForBanana.html'"></div>
    <div ng-show="MainCtrl.showOrange" ng-include = "'contentForOrange.html'"></div>
  </div>

Answer 4

希望这对你有所帮助。将一个json数组用于类别和数据，并获取单击索引的json数据的详细信息

<!DOCTYPE html>
<html>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>


<body ng-app="myApp" ng-controller="MyController">

    <div class="container">
        <div class="row">
            <div class="col-lg-3">
                <ANY ng-repeat="x in category" ng-click="getData($index)">
                {{x.category}}<br>
                </ANY>
            </div>

            <div class="col-lg-6">
                {{data}}
            </div>
        </div>  
    </div>

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

app.controller('MyController', function ($scope) 
{       
    $scope.data = '';
    $scope.category = [{category:'Apple',data:'Apple Data'},{category:'Banana',data:'Banana Data'},{category:'Orange',data:'Orange Data'}];

    $scope.getData = function(index)
    {
        $scope.data = $scope.category[index]['data'];
    }
});

</script>
</body>
</html>

Answer 5

我用简单的ngif

做到了

1）保持现在需要加载的页面索引

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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
   $scope.pageIndex = 0;

  /*
   * Updates current Page index
   */
  $scope.changeIndex= function(indexToChange){

       $scope.pageIndex = indexToChange;

    }
});

2）根据所选索引加载内容

  <body ng-controller="MainCtrl">

    <div class="mainframe">
        <div class="navigation">
            <ul class="list-group">
              <li class="list-group-item" ng-click="changeIndex(0)">Home<span class="status-icon"></span></li>
                <li class="list-group-item" ng-click="changeIndex(1)">Sign Up<span class="status-icon"></span></li>
                <li class="list-group-item" ng-click="changeIndex(2)">About<span class="status-icon"></span></li>
            </ul>
        </div>


        <div class="content">
       <div ng-if="pageIndex == 0" ng-include ="'Home.html'"></div>
       <div ng-if="pageIndex == 1" ng-include = "'SignUp.html'"></div>
       <div ng-if="pageIndex == 2" ng-include = "'About.html'"></div>
      </div>
  </div>

最终结果：
https://embed.plnkr.co/ic0eY2vwiOnChN2ahrEt/

在ng-click AngularJS上动态更改div内容

5 个答案: