Ich benutze Winkeldatentabelle, wo ich Tabelle jedes Mal erzeuge, wenn Benutzer eine Option auswählt.Für die erste Eingabe wird die Datentabelle erfolgreich gerendert, aber danach, wenn der Benutzer eine andere Option auswählt, verschwindet die Datentabelle aus der Sicht.Das Problem kann gelöst werden, wenn ich die Datentabelle Optionen vm.dtOptions und vm.dtColumnDefs außerhalb der Funktion.Aber muss ich das Problem zu lösen, die Optionen innerhalb der Funktion wie meine $scope.ln wird dynamisch innerhalb der Funktion generiert und ich brauche diesen Wert um die Schleife zu begrenzen.So wie kann ich mein Ziel erreichen, so dass anstelle des Verschwindens mehrere Tabellen basierend auf Benutzereingaben angezeigt werden können?Angularjs Datentabelle verschwindet beim wiederholten Rendern
var app = angular.module('myApp',['datatables']);
app.controller('MyCtrl', function($scope,DTOptionsBuilder,DTColumnBuilder,DTColumnDefBuilder) {
$scope.department = [
{value : "1", name : "sales"},
{value : "2", name : "admin"},
{value : "3", name : "other"}
];
$scope.dep=$scope.selected_dep;
$scope.depshow=function(){
$scope.dep=$scope.selected_dep;
if($scope.dep==1)
{
$scope.list = [
{"eid":"10","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"},
{"eid":"20","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"},
{"eid":"30","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"}
];
}
else if($scope.dep==2)
{
$scope.list = [
{"eid":"40","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"},
{"eid":"50","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"},
{"eid":"60","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"}
];
}
if($scope.dep==3) {
$scope.list = [
{"eid":"70","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"},
{"eid":"80","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"},
{"eid":"0","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"}
];
}
$scope.vm = {};
$scope.vm.dtOptions = DTOptionsBuilder.newOptions()
.withOption('order', [0, 'asc']);
$scope.ln=4;
$scope.vm.dtColumnDefs = [
];
for(var i=1;i<$scope.ln;i++){
$scope.vm.dtColumnDefs.push(DTColumnDefBuilder.newColumnDef(i).notSortable());
}
}
});<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://phpflow.com/demo/angular_datatable_demo/angular-datatables.min.js"></script>
<script src="https://phpflow.com/demo/angular_datatable_demo/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://phpflow.com/demo/angular_datatable_demo/datatables.bootstrap.css">
</head>
<div class="container">
<div ng-app="myApp" ng-controller="MyCtrl">
Select <select ng-model="selected_dep" ng-change="depshow()" ng-options="item.value as item.name for item in department">
<option value="">select a department</option>
</select>
{{selected_dep}}
<table class="table table-striped table-bordered" dt-options="vm.dtOptions" dt-column-defs="vm.dtColumnDefs" datatable="ng">
<thead>
<tr>
\t <th>Employee ID</th>
\t <th>dynamic clm1</th>
\t <th>dynamic clm2</th>
\t <th>dynamic clm3</th>
<th>sales</th>
</thead>
<tbody>
<tr ng-repeat="data in list">
<td> {{ data.eid }} </td>
<td> {{ data.dyn1 }} </td>
<td> {{ data.dyn2 }} </td>
<td> {{ data.dyn3 }} </td>
<td> {{ data.sales }} </td>
</tr>
</tbody>
</table>
</div>
haben Klammern nicht Wenn Sie den Code-Schnipsel ein Fehler laufen vom ersten Mal erzeugt wird – geo
ich erhalte keine Fehler gibt es eine Auswahloption und Sie müssen eine Option auswählen, um die Tabelle – query
Sorry, ich gebe auf. Ich las die Dokumentation durch, konnte es aber immer noch nicht herausfinden. Viel Glück. – adam0101