Question

我正在构建一个电子邮件应用。它包含一个更改默认设置的选项。单击时，将加载以下部分视图。

在此视图中，点击Save changes按钮后，用户选择的值将$localStorage保存在ngStorage中，如下所示：

savePreferenceService.js

(function() {
  'use strict';

  var savePreferenceService = function ($localStorage) {

        this.setPreferences = function (selectedLang, converse, selectedNumber, selectedNumberContact, reply, signature) {
            $localStorage.selectedLang = selectedLang;
            $localStorage.converse = converse;
            $localStorage.selectedNumber = selectedNumber;
            $localStorage.selectedNumberContact = selectedNumberContact;
            $localStorage.reply = reply;
            $localStorage.signature = signature;

            console.log($localStorage.selectedLang);
            console.log($localStorage.converse);
            console.log($localStorage.selectedNumber);
            console.log($localStorage.selectedNumberContact);
            console.log($localStorage.reply);
            console.log($localStorage.signature);
        }
  };    

      angular.module('iisEmail')
        .service ('savePreferenceService', ['$localStorage', savePreferenceService]);
}());

我有以下问题：

1）有没有办法将用户输入的值（例如selectedLang，converse，selectedNumber）存储在JSON文件中。我没有数据库。

2）如果用户仅更改了一些首选项（例如language首选项和number of conversations per page首选项），则所有其他首选项（例如number of contacts per page和reply）都会返回一个值undefined。有没有办法返回用户未更改的首选项的默认值？以下是包含dropdown菜单options的JSON文件（例如data.languages包含用户可以选择的所有languages）和默认首选项data.userPreferences。

settings.json

  {
        "data": {
            "languages": [
                "Afrikaans",
                "Albanian",
                "Arabic",
                "Armenian",
                "Basque",
                "Bengali",
                "Catalan",
                "Cambodian",
                "Chinese (Mandarin)",
                "German",
                "Greek",
                "Gujarati",
                "Hebrew",
                "Icelandic",
                "Maori",
                "Marathi",
                "Mongolian",
                "Serbian",
                "Slovak",
                "Slovenian",
                "Spanish",
                "Swahili",
                "Swedish",
                "Tamil",
                "Tatar",
                "Telugu"
            ],
            "undoSend": [
                5,
                10,
                20,
                30
            ],
            "conversations": [
                10,
                20,
                30,
                40,
                50,
                60,
                70,
                80,
                90,
                100
            ],
            "contacts": [
                20,
                40,
                60,
                80,
                100,
                120,
                130,
                140,
                180,
                200
            ],
            "userPreferences": {
                "selectedLang": "Telugu",
                "converse": false,
                "selectedNumber": 10,
                "selectedNumberContact": 20,
                "reply": false,
                "signature": "--"
            }
        }
    }

3）我的最终目标 - 在设置页面中，如果用户每页选择20个会话，则下次Inbox被点击时，我只想显示20封电子邮件。现在，有50封电子邮件正在显示（top-right - 它显示1-50 of 277）：

有没有人对这些问题有任何想法？

更新 - 问题1

看起来无法将用户输入的数据存储在JSON文件中，因此我使用localStorage将其保存在客户端。

更新 - 问题3

以下是问题3的解决方案。我在视图中将$scope.conversation属性绑定到conversation。 $scope.conversation的值设置为用户选择的数字。此号码保存在localStorage中。

<!DOCTYPE html>
<html>
<head lang="en">

    <meta charset="UTF-8">

    <title>Gmail App</title>

    <style>
        body {
            margin: 10px;
            padding: 50px;
        }
    </style>

    <link rel="stylesheet" href="Content/css/bootstrap.min.css">
    <link rel="stylesheet" href="Content/css/bootstrap-theme.min.css">

    <script src="Vendor/jquery-1.11.3.min.js"></script>
    <script src="Vendor/bootstrap.min.js"></script>
    <script src="Vendor/angular.min.js"></script>
    <script src="Vendor/angular-ui-router.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-route.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.6/ngStorage.min.js"></script>

</head>

<body data-ng-app="iisEmail">
  <div class="container" data-ng-controller="mainController">
    <div class="row">
        <div class="col-sm-3 col-md-2">
            <div class="btn-group">
                <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
                    Email <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Mail</a></li>
                    <li><a href="#">Contacts</a></li>
                    <li data-ng-click="loadView('settings')"><a href="#">Settings</a></li>
                </ul>
            </div>
        </div>
        <div class="col-sm-9 col-md-10">
            <!-- split button -->
            <div class="btn-group">
                <button type="button" class="btn btn-default">
                    <div class="checkbox" style="margin: 0;">
                        <label>
                            <input type="checkbox"
                                   data-ng-click="selectAllEmail()"
                                   data-ng-model="checkAllEmail">
                        </label>
                    </div>
                </button>

            </div>
            <button type="button" class="btn btn-default" data-toggle="tooltip" title="Refresh">
                Â Â Â <span class="glyphicon glyphicon-refresh"></span>Â Â Â 
            </button>
            <!-- Single button -->
            <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    More <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Mark all as read</a></li>
                    <li class="divider"></li>
                    <li class="text-center"><small class="text-muted">Select messages to see more actions</small></li>
                </ul>
            </div>
            <div class="pull-right" data-ng-controller = "settingsController">
                <span class="text-muted"><b>1</b>â€“<b data-ng-bind = "conversation" data-ng-cloak>{{conversation}}</b> of <b>277</b></span>
                <div class="btn-group btn-group-sm">
                    <button type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                    </button>
                    <button type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <hr/>
    <div class="row">
        <div class="col-sm-3 col-md-2">
            <a href="#" class="btn btn-danger btn-sm btn-block" role="button">COMPOSE</a>
            <hr/>
            <ul class="nav nav-pills nav-stacked">
                <li class="" data-ng-repeat="item in leftMenu">
                    <a href="#"><span class="badge pull-right"> {{item.emailCount}}</span> {{item.name}} </a>
                </li>
                <!--<li><a href="#">Starred</a></li>
                <li><a href="#">Important</a></li>
                <li><a href="#">Sent Mail</a></li>
                <li>-->
            </ul>
        </div>
        <div class="col-sm-9 col-md-10">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs">
                <li class="active"><a href="#home" data-toggle="tab"><span class="glyphicon glyphicon-inbox">
                    </span>Primary</a></li>
                <li><a href="#profile" data-toggle="tab"><span class="glyphicon glyphicon-user"></span>
                    Social</a></li>
                <li><a href="#messages" data-toggle="tab"><span class="glyphicon glyphicon-tags"></span>
                    Promotions</a></li>
                <li><a href="#settings" data-toggle="tab"><span class="glyphicon glyphicon-plus no-margin">
                    </span></a></li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
                <div ui-view></div>
            </div>
        </div>
    </div>
</div>
<script src="app/main.js"></script>
<!--Services-->

<script src="app/services/commonApiService.js"></script>
<script src="app/services/savePreferenceService.js"></script>

<script src="app/services/fetchDataService.js"></script>
<script src="app/controllers/mainController.js"></script>
<script src="app/controllers/settingsController.js"></script>
<script src="app/controllers/emailViewController.js"></script>
</body>
</html>

savePreferenceService.js

(function() {
  'use strict';

  var savePreferenceService = function ($localStorage) {
        this.setPreferences = function (selectedLang, converse, selectedNumber, selectedNumberContact, reply, signature) {
            $localStorage.selectedLang = selectedLang;
            $localStorage.converse = converse;
            $localStorage.selectedNumber = selectedNumber;
            $localStorage.selectedNumberContact = selectedNumberContact;
            $localStorage.reply = reply;
            $localStorage.signature = signature;
        };
  };    

      angular.module('iisEmail')
        .service ('savePreferenceService', ['$localStorage', savePreferenceService]);
}());

settingsController.js

(function() {
    'use strict';

    var settingController = function (fetchDataService, $scope, savePreferenceService, $localStorage) {
        $scope.url = 'app/mock/settings.json';
        $scope.save = {};

        fetchDataService.getContent($scope.url)
            .then(function(response){
                $scope.contacts = response.data.contacts;
                $scope.languages = response.data.languages;
                $scope.conversations = response.data.conversations;
                $scope.undoSend = response.data.undoSend;
                $scope.save = response.data.userPreferences;
            });

         $scope.setPreference = function () {
            savePreferenceService.setPreferences($scope.save.selectedLang, $scope.save.converse, $scope.save.selectedNumber, $scope.save.selectedNumberContact, $scope.save.reply, $scope.save.signature);
        };

        $scope.conversation = $localStorage.selectedNumber;
    };

    angular.module('iisEmail')
        .controller ('settingsController',
        ['fetchDataService', '$scope', 'savePreferenceService', '$localStorage', settingController]);
}());

AngularJS - 根据用户首选项更改视图

0 个答案: