Question

我在AngularJS和IonicFramework中几乎都是新手。我正在开发自己的应用程序，其中有一个带有时间轴的小社交网络（我从mysql获得并且我使用php在json中编码）和一些喜欢。这是一件非常简单的事情。

我使用$http.get来检索json数据，它就像这样：

        [{
        "id": "2",
        "timestamp": "2015-04-15 23:26:48",
        "autore": "reallidontknow",
        "likes": "2",
        "testo": "asd"
        },
        {
        "id": "3",
        "timestamp": "2015-04-15 23:26:39",
        "autore": "costi",
        "likes": "2",
        "testo": "rotfl"
        },
        {
        "id": "1",
        "timestamp": "2015-04-15 23:06:27",
        "autore": "stevvi",
        "likes": "1",
        "testo": "aaaaahahah"
        }
        ]

这是我的HTML：

            <div class="list card" ng-repeat="post in posts">
          <div class="item item-avatar">
            <img src="img/icon.png"> 
            <h2>{{post.autore}}</h2>
            <p>{{post.timestamp}}</p>
          </div>

          <div class="item item-body">
            <p ng-bind-html="post.testo">

            </p>
            <p>
                <a href="#" class="subdued"><i>{{post.likes}}</i> Mi Piace</a>
            </p>
          </div>

          <div class="item tabs tabs-secondary tabs-icon-left">
            <a class="tab-item" href="#" ng-click="like(post.id)">
              <i class="icon ion-thumbsup"></i>
              Mi Piace!
            </a>
          </div>
        </div>

这是我的控制器的一部分：注意：使用http get我做一个“帖子”，我知道这是一种可怕的方式，但很简单，所以真正做到了一个帖子。（使用idPost，我发送到服务器哪个帖子必须在他喜欢的列上制作+1）

$scope.like = function(idPost) {
    var lsVar = "like"+idPost;
    if (window.localStorage[lsVar] != undefined)
    {
        return;
    }
    else
    {

        urLike = "http://my_link.php?ggettt="+idPost;
        $http.get(urLike).success(function(data, status, headers, config) {
            console.log(JSON.stringify(data));
            if ((data.idPost == "false") || (data.idPost == "null"))
            {
                alert("Error.\n retry!");
                $window.location.reload(true);
            }
            else if (data.idPost == "noId") {
                alert("Error FATAL.");
                $window.location.reload(true);
            }
            else {
                window.localStorage[lsVar] = idPost;
                alert("LIKE inserted");
                });

            }
        }).error(function(data, status, headers, config) {
            console.log(JSON.stringify(data));
        });
    }
}

我的问题是，如果我点击“喜欢”按钮，我必须使用$window.location重新加载整个页面（那很糟糕!!!!），如你所见，因为如果我只使用{重新加载{ {1}}命令它不会实现任何东西..如果我使用$state则相同。

我要实时更改（放+1）并将按钮从“active”更改为“not active” < / strong>

有了这个问题，如果一个人已经喜欢（它保存在本地存储中以便它记住它）并且该人点击另一次“喜欢”它会出现（因为它必须是）警报。但是，当该人点击“确定”并点击另一个地方时，警报重新出现。这是什么！？

Answer 1

关于不立即看到+1，这是因为您只是在收到＆＃34;成功回复时才更新本地存储＆＃34;来自服务器。

为了解决这个问题，你应该更换

<a class="tab-item" href="#" ng-click="like(post.id)">

与

<a class="tab-item" href="#" ng-click="like(post)">

然后，修改＆＃34;喜欢＆＃34;功能如下（考虑＆＃34;数据＆＃34;从服务器返回的是包含喜欢的实际帖子）：

$scope.like = function(post) {
    var lsVar = "like"+post.id;
    if (window.localStorage[lsVar] != undefined)
    {
        return;
    }
    else
    {

        urLike = "http://my_link.php?ggettt="+post.id;
        $http.get(urLike).success(function(data, status, headers, config) {
            console.log(JSON.stringify(data));
            if ((data.idPost == "false") || (data.idPost == "null"))
            {
                alert("Error.\n retry!");
                $window.location.reload(true);
            }
            else if (data.idPost == "noId") {
                alert("Error FATAL.");
                $window.location.reload(true);
            }
            else {
                window.localStorage[lsVar] = idPost;
                post = data;
                alert("LIKE inserted");
                });

            }
        }).error(function(data, status, headers, config) {
            console.log(JSON.stringify(data));
        });
    }
}

＆＃34; post = data;＆＃34;可能需要一些更改，具体取决于您从服务器收到的响应+您可能必须执行$ scope。$ apply（）或直接更新$ scope.posts以刷新屏幕上的数据，但一般的想法是你有更新$ scope.posts中的喜欢数量，以便在屏幕上刷新。

无论如何，您应该知道最佳做法是保存并验证哪个用户喜欢服务器端的内容，因为在客户端保存和验证这意味着用户可以编辑/删除数据+同一用户可以从不同的机器/浏览器和几次相同的帖子。

我希望this demo能帮助你重新开始...

Answer 2

更改你的html（只是按钮div），如下所示：

      <div class="item tabs tabs-secondary tabs-icon-left" ng-hide="post.has_liked">
        <a class="tab-item" href="#" ng-click="like(post.id)">
          <i class="icon ion-thumbsup"></i>
          Mi Piace!
        </a>
      </div>
      <div class="item tabs tabs-secondary tabs-icon-left" ng-show="post.has_liked">
        <span class="tab-item">
          <i class="icon ion-thumbsup"></i>
          +1
        </span>
      </div>

之后在你的js中，当你从服务器得到确认时，在post对象的has_liked属性中设置为true。

post.has_liked = true;

angularjs和离子框架如何实时增加喜欢

2 个答案: