Javascript 在 ng-click AngularJS 上动态更改 div 内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35475633/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change div content dynamically on ng-click AngularJS
提问by JohnDizzle
I want to display some data and tables in the content divwhich depends on which category you choose on the left hand side navigation.
So if I change the category also the displayed content of the content div should change.
我想在内容中显示一些数据和表格，div这取决于您在左侧导航中选择的类别。因此，如果我更改类别，则内容 div 的显示内容也应该更改。
Here is my code on Plunkr.
这是我在Plunkr 上的代码。
But it seems that not even this simple example is working.
但似乎即使是这个简单的例子也不起作用。
So I have two Questions:
所以我有两个问题：
1.) How can I fix this example code to run ?
1.) 如何修复此示例代码以运行？
But more important:
但更重要的是：
2.) Is there a better way to change the content div when you change the category ?
2.)更改类别时是否有更好的方法来更改内容 div？
采纳答案by RVstack
I removed 'this' elements from code and also changed ng-view to ng-show.
我从代码中删除了“this”元素，并将 ng-view 更改为 ng-show。
<div>
<div ng-show="showApple">{{content}}</div>
<div ng-show="showBanana">{{content}}</div>
<div ng-show="showOrange">{{content}}</div>
</div>
There was something wrong with that you named your div class "content" so I removed that also.
您将 div 类命名为“内容”有问题，因此我也将其删除。
I am sure it isn't a perfect solution but now it works.
我确信这不是一个完美的解决方案，但现在它可以工作了。
回答by Mazhar Ul Hassan
You can use ng-include to show your contents but you have to keep them in seperate files e.g contentForApple, contentForBanana and contentForOrange. Here I can show you a little change in your div
您可以使用 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>
回答by rrd
To be honest your best bet is to use $states/views. With a data-ui-view on the content div and a data-ui-sref link on the button on your menu, you can easily switch out content. Take a look at the ui-routerpage to get a better understanding of it. With templates for each 'view' that your menu will click to, your code will not just be much easier to manage, but probably more understandable.
老实说，您最好的选择是使用 $states/views。通过内容 div 上的 data-ui-view 和菜单按钮上的 data-ui-sref 链接，您可以轻松切换内容。查看ui-router页面以更好地了解它。通过菜单将点击的每个“视图”的模板，您的代码不仅更易于管理，而且可能更易于理解。
回答by Paresh Gami
Hope this help you. Take one json array for category and data and get details of json data which index is clicked
希望这对你有帮助。取一个用于分类和数据的 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>
回答by Hitesh Sahu
I did it with simple ngif
我用简单的 ngif 做到了
1) Keep an Index of Page which needs to be is loaded now
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) Load content based on selected index
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>
Final Result:
https://embed.plnkr.co/ic0eY2vwiOnChN2ahrEt/
