2016-05-02 1 views
0

私は2つのボタンを持っています。臀部のDefullt色は緑色です。最初にボタンを押すと、ボタンの色が赤に変わります。ボタンの色をリフレッシュすると、デフォルトの色になります。 ページをリフレッシュするときに、ボタンの色を孤立させる方法を教えてください。ng-storageを使用してng-clickを完了したときにボタンの色を修正する方法は?

<script> 
    var app = angular.module('plunker', ["ngStorage"]); 
    app.controller('MainCtrl', function($scope,$localStorage) { 
    $scope.tablelist = [{"tablename":"t1"},{"tablename":"t2"}] 
    if($localStorage.tableArray === undefined){ 
     $localStorage.tableArray = [] 
     } 
    if($localStorage.tableslist===undefined){ 
     $localStorage.tableslist=[] 
     } 
    $scope.getTable=function(table){ 
    table.btnClass = table.btnClass == "btn-danger" ? "btn-success" : "btn-danger" 
    var exists=false; 
    angular.forEach($localStorage.tableArray, function (list,$index) { 
    if ((list.tablename == table.tablename)) { 
     console.log(list.tablename) 
     console.log(table.tablename) 
     exists=true; 
     $localStorage.tableArray.splice($index,1) 
     $localStorage.tableArray.splice($index,1) 
     return false 
    } 
}); 
if(!exists){ 
     $localStorage.tableslist.push(table) 
     $localStorage.tableArray=$localStorage.tableslist; 
     $scope.$storage=$localStorage.tableArray 
     console.log($localStorage.tableArray) 
     table.color="red" 
      } 
    } 
}); 

`https://plnkr.co/edit/pSld7q89t1DCZ6l4pglZ?p=preview

+0

ページを更新すると、緑色で表示されます。実際に何をしたいですか? –

+0

ボタンをクリックすると赤色に変わります。今私はボタンの色が赤でなければならないページを更新します。 – SrinivasAppQube

+0

サーバに保存する場合は 'AJAX'、ローカルコンピュータの場合は' localStorage'を使用して反映させることができます。 –

答えて

1

あなたがそれをクリアする前に、その配列から$scope.tablelistに保存されたのCssClassを渡すために持っているので、あなたは、毎回クリック$localStorage.tableArrayに イベントが発生し、ストレージのデータをクリアしています。これは、次の手順を実行して、私と一緒に働いていた:$scope.getTable = function

app.controller('MainCtrl', function ($scope, $localStorage, $filter) { 

2 - アドオン次のコード:

の1-コントローラに追加$フィルタ

angular.forEach($scope.tablelist, function (list, $index) 
{ 
    var found = $filter('filter')($localStorage.tableArray, 
       { tablename: list.tablename }, true); 

    if (found.length) {$scope.tablelist[$index].btnClass = found[0].btnClass;} 
}); 

EDIT: これは、 plnkrリンク: https://plnkr.co/edit/x32vQIJO6wbzZjDa77WH?p=preview

+0

ありがとうございます。これは私のために働いていません。プランナーのコードを編集してください。 – SrinivasAppQube

+0

私は私の答えでリンクを追加しました – user2903753

+0

ありがとうございましたとてもuser2903753 @。 – SrinivasAppQube

関連する問題