Question

使用Angular local storage的新用户，在表格中的数据发生变化后，我无法将数据存储在本地存储空间中。

我已经阅读了他们的说明并且他们的演示在我自己的环境中工作，但是当用户在输入字段中键入字符时，它正在观察变化。我需要它来监视<tr> / <td>中的更改，然后将其存储在本地存储中。

当我记录传递给函数的值时，它返回“null”。填充表格的数据是动态的，根据用户点击的项目而变化。知道为什么没有存储加载到表中的数据吗？

更新

包括我在ng-click收集数据的服务。 id显示在表格单元格中，但是：

我不得不在表格单元格中使用<input>
目前没有数据绑定到单元格，但需要
当我刷新页面时，会显示表格标题，但数据仍会消失
存储每个单独的项目不是最有效的方法

我将标记我拥有的两个html模板。第一个（list-patents.htm）是显示项目的表。当用户点击某个项目时，该表格下方的第二个模板（patent-item.htm）将加载到显示相关信息的ng-view。

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

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

    localStorageServiceProvider
        .setPrefix('demoPrefix')

    $urlRouterProvider
      .when('', '/patents/list-patents')
      .when('/', '/patents/list-patents')
      .when('/patents', '/patents/list-patents')
      .when('/transactions', '/transactions/current-transactions')
      .otherwise('/patents/list-patents');

    $stateProvider
    .state("patents", {
        url: "/patents",
        templateUrl: "templates/patents/patent-nav.htm",
        controller: "patentListCtrl"
    })
    .state("patents.list", {
        url: "/list-patents",
        templateUrl: "templates/patents/list/list-patents.htm",
        controller: "patentListCtrl"
    })

    .state("patents.list.item", {
        url: "/patent-item",
        templateUrl: "templates/patents/list/patent-item.htm",
        params: {
           //load of params
        },
        controller: "patentItemCtrl"
    })
}];

app.factory('loadPatentItemService', ['$http', '$timeout', function($http, $timeout) {

var factory = {};

    var selectedItem = null;

    factory.select = function(item) { 
        factory.storeSelect = [];
        selectedItem = item;
        factory.storeSelect.push(selectedItem)
        factory.getPatent();

        return [selectedItem];
    }

}])

app.controller('patentItemCtrl', ['$scope', 'patentTabService', 'patentCheckboxService', 'localStorageService', 'loadPatentItemService', function($scope, patentTabFactory, patentCheckboxService, localStorageService, loadPatentItemService){

        var testid = loadPatentItemService.storeSelect[0].id;

        $scope.$watch('itemStorage', function(){ //watch for change, value passed to function
            localStorageService.set('itemStorage', testid);  //set value of property (what user typed in)
            $scope.localStorageDemoValue = localStorageService.get('itemStorage');
        });

        $scope.$watch(function(){
        return localStorageService.get('itemStorage');
        }, function(){
            $scope.itemStorage = testid;
        });

}])

列表patents.htm

<div class="row">
    <div class="col-md-12">
        <table>
            <thead>
                <tr>
                    <td class="align-middle">Application No. </td>
                    <td class="align-middle">Client Ref</td>
                    <td class="align-middle">Cost now</td>
                    <td class="align-middle">Cost band end</td>
                    <td class="align-middle">Cost next</td>
                    <td class="align-middle">Renewal Date</td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="x in patents">
                    <td ng-click="select(x)"><a ui-sref="patents.list.item({id: x.id, patentApplicationNumber: x.patentApplicationNumber, clientRef: x.clientRef, renewalStatus: x.renewalStatus, currentRenewalCost: x.currentRenewalCost, costBandEndDate: x.costBandEndDate, renewalCostNextStage: x.renewalCostNextStage, renewalDueDate: x.renewalDueDate, shortTitle: x.shortTitle, primaryApplicantName: x.primaryApplicantName, patentPublicationNumber: x.patentPublicationNumber,  title: x.title, filingDate: x.filingDate, epoPatentStatus: x.epoPatentStatus})">{{x.applicationNumber}}</a></td>
                    <td ng-bind="x.clientRef"></td>
                    <td ng-bind="x.currentRenewalCost">$</td>
                    <td ng-bind="x.costBandEndDate"></td>
                    <td ng-bind="x.renewalCostNextStage"></td>
                    <td ng-bind="x.renewalDueDate"></td>
                </tr>
            </tbody>
        </table>
        <div ui-view></div>     
    </div>
</div>

专利item.htm

<div class="col-md-6 text-xs-center" ng-controller="patentItemCtrl">
    <h2>Application Number</h2>
    <table class="table table-striped">
            <thead>
                <tr class="font-weight-bold">
                    <td>applicationNumber</td>
                    <td>clientRef</td>
                    <td>renewalStatus</td>
                    <td>costBandEndDate</td>
                    <td>renewalCostNextStage</td>
                    <td>renewalDueDate</td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="x in patentItem">
                    <td><input type="text" ng-model="itemStorage" placeholder="Start typing..." readonly></td>
                    <td><input type="text" ng-model="x.clientRef" placeholder="Start typing..." readonly></td>
                    <td ng-bind="x.renewalStatus"></td>
                    <td ng-bind="x.costBandEndDate"></td>
                    <td ng-bind="x.renewalCostNextStage"></td>
                    <td ng-bind="x.renewalDueDate"></td>
                  </tr>
            </tbody>
    </table>
</div>

无法在表数据更改的本地存储中存储数据

0 个答案: