javascript - 使用 Angular js 重置表首选项

标签 javascript html css angularjs

我的应用程序中有下表,用户可以在其中设置他们的通知首选项。

  1. 当页面加载时 $ctrl.getNotificationSettings() 将被调用,它会列出各种类别的用户通知首选项。请引用屏幕截图
  2. 我还写了一个 $ctrl.save() ,它允许用户更新他们的偏好并保存它,效果很好。
  3. 现在我有一个带有 $ctrl.cancelSettings() 的重置按钮。在这里我希望用户能够更改一些首选项,如果他决定在保存之前恢复它,那么应该使用首选项设置表格加载时。在这方面需要一些帮助。

由于其他一些挑战,我不能在这里使用表格。

HTML

  <tbody>
  <tr data-ng-repeat="app in $ctrl.notificationSettings" class="content-box">
        <td data-ng-bind="app.appName"></td>
        <td><ng-checkbox data-checked="app.email" rounded="true"></ng-checkbox></td>
        <td><ng-checkbox data-checked="app.sms" rounded="true"></ng-checkbox></td>
  </tr>
  </tbody>
  </table>
  <div class="content-box">
        <button class="ng-button-primary" data-ng-click="$ctrl.saveSettings()">Save</button>
        <button class="ng-button-secondary" data-ng-click="$ctrl.cancelSettings()">Reset</button>
  </div>

JS

            $ctrl.getNotificationSettings = function () { 
                var url = "http://localhost:3000/json/notification-settings.json";
                rsicontext.getData(url).then(function (response) {
                    $ctrl.notificationSettings = response.data;
                    $ctrl.appName = response.data.appName;
                    $ctrl.emailNotification = response.data.email;
                    $ctrl.smsNotification = response.data.sms;
                });
            };


            $ctrl.cancelSettings = function () {
                console.log("cancel settings");
            };

JSON 格式列出数据

    [{
    "appName":"Finance",
    "email":true,
    "sms":false
    },
    {
    "appName":"Sports",
    "email":true,
    "sms":true
    },
    {
    "appName":"Economics",
    "email":false,
    "sms":false
    },
    {
    "appName":"Health",
    "email":false,
    "sms":true
    }]

enter image description here

最佳答案

如何使用 angular.copy 对原始对象进行深拷贝?

  $ctrl.getNotificationSettings = function () { 
            var url = "http://localhost:3000/json/notification-settings.json";
            rsicontext.getData(url).then(function (response) {
                $ctrl.notificationSettings = response.data;
                $ctrl.appName = response.data.appName;
                $ctrl.emailNotification = response.data.email;
                $ctrl.smsNotification = response.data.sms;
                $scope.origData = angular.copy(response.data);
            });
        };

        $ctrl.cancelSettings = function () {
            $ctrl.notificationSettings = $scope.origData;
                $ctrl.appName = $scope.origData.appName;
                $ctrl.emailNotification = $scope.origData.email;
                $ctrl.smsNotification = $scope.origData.sms;
        };

关于javascript - 使用 Angular js 重置表首选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41423156/

相关文章:

javascript - 如何在 JavaScript 中创建切换函数以在 HTML 中显示 div?

css - 用 Bootstrap 3 css 覆盖 Liferay 的 mui css

javascript - WordPress php 下拉菜单点击即可

javascript - 如何使用按钮单击将 ReactJS 页面重定向到纯 HTML 页面?

javascript - 在 javascript 中,从对象的方法之一创建对象的新实例是否合法?

javascript - 如何使用 AngularJS scope.$bind

html - 有谁知道如何在 <select> 的选项标签中添加上标

html - Bootstrap中心表单和表单下的一些文本

javascript - 很少有网站先加载结构再加载内容,这背后是 Ajax 吗?

javascript - Google 云端硬盘/电子表格 - 在子文件夹中修改文件时发送电子邮件通知