{"id":1169,"date":"2015-08-05T13:43:18","date_gmt":"2015-08-05T13:43:18","guid":{"rendered":"http:\/\/www.honobono-life.info\/wpeng\/?p=1169"},"modified":"2015-08-05T13:43:18","modified_gmt":"2015-08-05T13:43:18","slug":"show-followunfollow-buttons-with-angularjs","status":"publish","type":"post","link":"http:\/\/www.honobono-life.info\/wpeng\/show-followunfollow-buttons-with-angularjs\/","title":{"rendered":"Ruby on Rails Tutorial show follow\/unfollow buttons with AngularJS"},"content":{"rendered":"<p><strong>1)AngularJS template view<\/strong><\/p>\r\n\r\n<p>$ vi app\/assets\/templates\/users\/show.html.erb<\/p>\r\n\r\n<pre class=\"prettyprint\">\r\n&lt;div class=&quot;col-xs-6 col-sm-8&quot;&gt;\r\n  &lt;div ng-show=&quot;!flg_follers &amp;&amp; chkSignin() &amp;&amp; \r\n       chkSignin().user.id != user_info.user.id&quot; class=&quot;row&quot;&gt;\r\n    &lt;div ng-show=&quot;flg_unfollow&quot;&gt;\r\n      &lt;a class=&quot;btn btn-large btn-primary&quot; href=&quot;#&quot; \r\n         ng-click=&quot;unfollow(user_info.user.id)&quot;&gt;\r\n        Unfollow\r\n      &lt;\/a&gt;\r\n    &lt;\/div&gt;\r\n    &lt;div ng-hide=&quot;flg_unfollow&quot;&gt;\r\n      &lt;a class=&quot;btn btn-large btn-primary&quot; href=&quot;#&quot; \r\n        ng-click=&quot;follow(user_info.user.id)&quot;&gt;follow&lt;\/a&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;<\/pre>\r\n\r\n<p><strong>2)AngularJS controller<\/strong><\/p>\r\n\r\n<p>$ vi app\/assets\/javascripts\/mymodule.js.erb<\/p>\r\n\r\n<pre class=\"prettyprint\">\r\nmyModule.controller(&quot;UsersShowCtrl&quot;, function($scope, $routeParams, userResource, flashService, $filter, micropostsResource, $q) {\r\n  var qgetUser = function(deferred) {\r\n    if (flashService.getUser()) {\r\n      var quser_info = flashService.getUser();\r\n      deferred.resolve(quser_info);\r\n    } else {\r\n      sessionResource.current_user({}, function(response) {\r\n        if (response.user.id) {\r\n          var quser_info = response;\r\n        } else {\r\n          var quser_info = { user: {id: 0} };\r\n        }\r\n        flashService.setUser(quser_info);\r\n        deferred.resolve(quser_info);\r\n      });\r\n    }\r\n  }\r\n\r\n  var chkUnfollow = function() {\r\n    $scope.flg_unfollow = false;\r\n    var deferred = $q.defer();\r\n    deferred.promise.then(function (result) {\r\n      var user_signin = result.user.id;\r\n      for (var i=0; i&lt;=$scope.user_info.followers.length; i++) {\r\n        if ($scope.user_info.followers[i] &amp;&amp; $scope.user_info.followers[i].id == user_signin) {\r\n          $scope.flg_unfollow = true;\r\n        }\r\n      }\r\n    },function (reason) {\r\n      console.log(&quot;user_signin-Error&quot;);\r\n    },function (reason) {\r\n      console.log(&quot;user_signin&quot;);\r\n    })\r\n    qgetUser(deferred);\r\n  };\r\n\r\n  userResource.show({ id: $routeParams.id }, function(response) {\r\n    $scope.user_info = response;\r\n    chkUnfollow();\r\n........\r\n  });\r\n<\/pre>","protected":false},"excerpt":{"rendered":"<p>1)AngularJS template view $ vi app\/assets\/templates\/users\/show.html.erb &lt;div class=&quot;col-xs-6 col-sm-8&quot;&gt; &lt;div ng-show=&quot;!flg_follers &amp;&amp; chkSignin() &amp;&amp; chkSignin().user.id != user_info.user.id&quot; class=&quot;row&quot;&gt; &lt;div ng-show=&quot;flg_unfollow&quot;&gt; &lt;a class=&quot;btn btn-large btn-primary&quot; href=&quot;#&quot; ng-click=&quot;unfollow(user_info.user.id)&quot;&gt; Unfollow &lt;\/a&gt; &lt;\/div&gt; &lt;div ng-hide=&quot;flg_unfollow&quot;&gt; &lt;a class=&quot;btn btn-large btn-primary&quot; href=&quot;#&quot; ng-click=&quot;follow(user_info.user.id)&quot;&gt;follow&lt;\/a&gt; &lt;\/div&gt; &lt;\/div&gt; 2)AngularJS controller $ vi app\/assets\/javascripts\/mymodule.js.erb myModule.controller(&quot;UsersShowCtrl&quot;, function($scope, $routeParams, userResource, flashService, $filter, micropostsResource, $q) { var qgetUser [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[137],"tags":[35,189,187,188],"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1169"}],"collection":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/comments?post=1169"}],"version-history":[{"count":1,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1169\/revisions"}],"predecessor-version":[{"id":1170,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1169\/revisions\/1170"}],"wp:attachment":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/media?parent=1169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/categories?post=1169"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/tags?post=1169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}