问题摘要

Question

在我的布局页面的左侧，有一个包含作业名称列表的表格。右侧是视图填充的位置。我的观点各有相同的表格。 ChangeOrders.cshtml，PurchaseOrders.cshtml等...当您在ChangeOrders视图中时，在您从“作业名称”表中选择作业之前，不会显示任何内容。出现具有该JobId的ChangeOrders。但是，当我切换到另一个视图时，作业选择清除自己。我需要该作业保持选中状态，直到我选择另一个作业或按下清除过滤器按钮。

布局页面上的作业表

<table class=" table table-bordred table-striped table-hover" ng-table=" tableparams" show-filter="true" ng-scroll-viewport style="height:200px;">
    <tr ng-repeat="job in jobArray" class="pointer" ng-click="selectJob(job)">
        <td data-title="'Job Name'" sortable="'JobName'" filter="{ 'JobName': 'text' }">{{job.JobName}}</td>
    </tr>
</table>

ChangeOrder.cshtml（除数据外所有其他视图都相同）

<table class=" table table-bordred table-striped table-hover" ng-table="tableParams" show-filter="true" >
    <tr ng-repeat="job in selectedJob().ChangeOrders" class=" pointer">
        <td ng-click="editChangeOrderModal(job)" data-title="'CO Number'" sortable="'ChangeOrderNumber'" filter="{ 'ChangeOrderNumber': 'text' }">{{job.ChangeOrderNumber}}</td>
        <td data-title="'CO Date'" sortable="'ChangeOrderDate'" filter="{ 'ChangeOrderDate': 'text' }">{{job.ChangeOrderDate | date : date : shortDate}}</td>
        <td data-title="'CO Name'" sortable="'ChangeOrderName'" filter="{ 'ChangeOrderName': 'text' }">{{job.ChangeOrderName}}</td>
        <td data-title="'CO Amount'" sortable="'ChangeOrderAmount'" filter="{ 'ChangeOrderAmount': 'text' }">${{job.ChangeOrderAmount | number : fractionSize}}</td>
        <td data-title="'CO ApprovedDate'" sortable="'ChangeOrderApprovedDate'" filter="{ 'ChangeOrderApprovedDate': 'text' }">{{job.ChangeOrderApprovedDate | date : date : shortDate}}</td>
        <td data-title="'CO ApprovedAmount'" sortable="'ChangeOrderApprovedAmount'" filter="{ 'ChangeOrderApprovedAmount': 'text' }">${{job.ChangeOrderApprovedAmount | number : fractionSize}}</td>
        <td data-title="'CO ApprovedNumber'" sortable="'ChangeOrderApprovedNumber'" filter="{ 'ChangeOrderApprovedNumber': 'text' }">{{job.ChangeOrderApprovedNumber}}</td>
        <td data-title="'CO Attn'" sortable="'ChangeOrderAttn'" filter="{ 'ChangeOrderAttn': 'text' }">{{job.ChangeOrderAttn}}</td>
    </tr>
</table>

控制器

//Sync Table Selections
$scope.selectJob = function (job) {
    $rootScope.selectedJob = job;
};

更新我正在使用ngStorage作为sessionStorage ngStorage 我试图实现它，但我不知道如何使用$ rootScope。我还需要添加jquery函数。

$scope.selectJob = function (job) {
    $rootScope.selectedJob = $sessionStorage.$default(job);
    console.log($rootScope.selectedJob);
};
$scope.selectedJob = $scope.selectedJob = function () {
    return $rootScope.selectedJob;
};
$('#myTable').on('click', ' tbody tr', function (event) {
    $(this).addClass('highlight').siblings().removeClass('highlight');
});

Answer 1

问题摘要

正如所讨论的那样$rootScope正在被清除，因为你当前应用程序设置不是AngularJS单页面应用程序。它是可以理解的是，你现在无法将其切换出来好吧，你的应用程序仍然可以很好地切换到一些角度。

为了使数据在视图中保持持久性，您需要将数据保存在某种形式的客户端存储中，然后在控制器加载并填充值时检查值。

多个存储选项

1）HTML5存储空间

Here is a an article about HTML5 storage。有两种类型的html5网络存储空间。

的 localStorage的

这可以非常灵活地贯穿会话和标签。但是如果你想要它清除它有被手动清除，那么根据你存储的内容它可能被认为是不安全的。

的的sessionStorage

sessionStorage几乎与本地存储相同，但会话结束后不会保存。所以它在新窗口中不可用。

如果您对此选项感兴趣，这些对象并不难自行处理。但如果你发现它更容易，你可以使用this project，它将对象包装在一个角度工厂中。

2）Cookie

虽然是有效的存储选项。如果您想共享数据服务器端并希望在标头中发送数据，那么Cookie就是真正的意思。

Angular有处理cookie的模块。 您必须从AngularJS网站下载angular-cookies并将其包含在使用ngCookies 中。 Angular API Reference

Angular cookies可以通过两种方式实现

$cookie （API reference），它是document.cookie对象的基本包装器。并设置命名值。

$cookieStore （API reference）具有相同的基本功能，但使用(key,value)格式。

如何在多个视图AngularJS中选择一个表行

1 个答案:

问题摘要

多个存储选项