使用 ng-storage 完成 ng-click 时如何修复按钮的颜色？

Question

我有两个按钮。按钮的默认颜色为绿色。当第一次点击按钮时，按钮的颜色将变为红色。但是当刷新按钮的颜色时，按钮的颜色将变为默认颜色。请帮助我如何使刷新页面时按钮的颜色滞留。

<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

Answer 1

您每次点击都会清除$localStorage.tableArray中的存储数据事件触发，因此您必须在清除它之前将存储的 cssClass 从该数组传递到 $scope.tablelist。它通过执行以下操作与我一起工作：

1- 将 $filter 添加到控制器：

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

2-在$scope.getTable = function之前添加如下代码：

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: This is the plnkr link: https://plnkr.co/edit/x32vQIJO6wbzZjDa77WH?p=preview

使用 ng-storage 完成 ng-click 时如何修复按钮的颜色？

how to fix the color of the button when ng-click done using ng-storage?

html

angularjs

angular-ui-bootstrap