使用来自 DOM 的信息创建一个控制器/服务来持久化数据

Question

在 Angular 中，我在一个视图中有一个项目列表，这些项目将根据它们是否被选中而显示在另一个视图中。

这是您检查要在另一个视图中显示的运动的视图

<ion-item ng-repeat="sport in sports"
          ng-init="sport.checked = true"
          ng-click="sport.checked = !sport.checked">
    {{:: sport.name}}
</ion-item>

这是另一个视图

<div ng-show="sport.checked"
  ng-repeat="sport in sports">
    {{sport.name}}
</div>

您看到所有这些运动都有一个ng-init = sport.checked = true，所以所有运动都显示在开头，但您可以取消选中这些运动，以便在再次选中之前看不到它们。

这就是我到目前为止所拥有的一切，但是一旦你刷新页面，所有的检查和取消检查都会消失，刷新后一切都会重新启动，所以你知道我需要将数据保存在数据库或其他东西中，我正在使用node.js/sails.js 以及 Redis 用于此。我知道如何在 node.js 部分中创建几乎所有内容，但我需要在 Angular 部分的控制器和服务方面提供一些帮助，所以我需要你的帮助。

我希望用户只能检查一次他们的运动，而不是每次登录应用程序时。

那么当一项运动未被选中时，我可以向控制器添加哪些功能来向服务提供建议，以及服务将如何接收该数据？

另外，如果您对 NodeJS 部分有任何建议，那也太棒了。

Answer 1

这是您可以使用的示例。这是非常简陋的。所有$http 函数都使用promise。当控制器为空时，控制器将从服务获取设置，它会从服务请求新设置

angular.module('app').controller('appctrl',['appsrv','$scope',function(appsrv, $scope){
    $scope.settings = service.settings;
    if(!$scop.settings){
       //retrieve data from server when it's not in the service
       appsrv.getSettingsRemote().then($scope.settings = service.settings);
}

    }]).service('appsrv',[$http, function($http){

    return {
    getSettings :  function (){
    // get settings from localstorage
},
    setSettings :  function (){
    // store settings to localstorage
},
    getSettingsRemote : function () {

    $http.get('url').then(//set things locally);
}
}

}]);

然后从您的视图中，您可以将控制器分配给视图，然后参考您的设置，例如 {{settings.propname}}

我不想写你所有的代码，但也许这让你了解了你可以做什么