2016-07-03 5 views
1

コントローラ:ショーglyphicon角度値をHTMLに基づいて

.controller('BlogController', function(blogFactory, $routeParams, $scope){ 

    var that=this; 

    stat=false; 

    this.checkbookmark = function(bId){ 
    console.log(bId) 
    blogFactory.checkBookmark(bId, function(response){ 
     console.log(response) 
     if(response == "bookmarked"){ 
      that.stat = true; 
     } 
     else{ 
      that.stat = false; 
     } 
    }) 
} 

htmlコード:

私は STAT

の値に基づいてglyphiconを見せたい

<div class="container" ng-controller="BlogController as blogCtrl"> 

    <div class="row" ng-repeat="chunk in blogCtrl.blogs | filter: filter_name | orderBy:'-created_at' | groupBy: 3"> 


     <div class="outerbox1 col-sm-4" ng-repeat="blog in chunk" > 
      <div class="innerbox3" ng-init="blogCtrl.checkbookmark(blog._id)"> 
       <br> 
       <div> > READ MORE 
        <a ng-if="blogCtrl.stat" ng-href="#" ng-click="blogCtrl.removebookmark(blog._id)" class="glyphicon glyphicon-heart pull-right">{{blogCtrl.stat}}</a> 
        <a ng-if="!blogCtrl.stat" ng-href="#" ng-click="blogCtrl.addbookmark(blog._id)" class="glyphicon glyphicon-heart-empty pull-right">{{blogCtrl.stat}}</a> 
       </div> 

      </div> 
     </div> 
    </div> 
</div> 

私は6つのブログを持っています最初の3つはブックマークされ、次の3つはブックマークされません。

の値は常に最後のブックマークに従って値が設定されているため、(前回のブログの状態に基づいて)常にfalse/trueです。

解決方法その後、

this.checkbookmark = function(blog){ //pass the entire blog, not just the id 
    blogFactory.checkBookmark(blog._id, function(response){ 
     console.log(response) 
     if(response == "bookmarked"){ 
      blog.stat = true; //set the property on blog instead of the controller 
     } 
     else{ 
      blog.stat = false; 
     } 
    }) 
} 

そして:代わりにあなたがブログのオブジェクトのプロパティを設定する必要があり、コントローラ上のstatプロパティを設定する

答えて

3

(それは明らかにオブジェクトに属している)

これであなたcheckbookmark機能を交換してくださいこのようにそれを使用します。

<div class="innerbox3" ng-init="blogCtrl.checkbookmark(blog)"> 
    <br> 
    <div> > READ MORE 
     <a ng-if="blog.stat" ng-href="#" ng-click="blogCtrl.removebookmark(blog._id)" class="glyphicon glyphicon-heart pull-right">{{blog.stat}}</a> 
     <a ng-if="!blog.stat" ng-href="#" ng-click="blogCtrl.addbookmark(blog._id)" class="glyphicon glyphicon-heart-empty pull-right">{{blog.stat}}</a> 
    </div> 
</div> 

あなたは似てあなたのaddremovebookmark機能に変更にする必要があります。 s

+0

それは働いた。おかげさま...リアルタイムで表示を更新する方法を教えてください。つまり、ユーザーがクリックすると変更するグリフコンアイコンです。 @ x4rf41 – kRAk3N

+0

私が言ったように、あなたは追加と削除の機能に同じ変更を行う必要があります:ブログ全体を渡してIDだけでなく、新しい値 – x4rf41

+0

にblog.statプロパティを設定してください、ありがとう@ x4rf41 – kRAk3N

関連する問題