在頁面刷新後保持複選框被選中AngularJS

我對AngularJS來說很新，不得不接管別人的項目，而這個項目幾乎沒有任何文檔。在頁面刷新後保持複選框被選中AngularJS

我在我的應用程序中有兩種複選框，一個是「全選」複選框，另一個是設備選擇複選框。顧名思義，全選將選擇下面列出的所有設備，如果我取消選中「全選」複選框，我可以單獨檢查設備以查看它們。

這裏是選擇的代碼的所有複選框 -

<input type="checkbox" data-ng-model='devCtrl.uiChoices.selectAll' value='true' data-ng-change="devCtrl.selectAll()"/><h4>Select/Deselect All</h4>

控制器：

_this.uiChoices.selectAll = true;

我可以從上面，在默認情況瞭解，選擇所有被選中，我可以看到所有的設備在它下面也檢查。

移動到設備複選框 -

<input type="checkbox" data-ng-model='device.draw' data-ng-change="device = devCtrl.adjustVisibility(device)" />

控制器 -

_this.adjustVisibility = function(draw) { 
     draw.marker.setVisible(draw.plot); 
     return draw; 
    }

基本上，whenvever被選擇的裝置中，它會出現一個谷歌地圖上。如果未選中，則不會顯示在地圖上。

我的問題是，在取消選中「全選」複選框，然後在下面的列表中只選擇2個設備，然後執行頁面刷新後，我希望全部選擇被禁用並僅顯示那2個設備檢查並顯示在地圖上。

設備列表正在從MySQL數據庫中提取並被動態更新。

任何幫助表示讚賞。

來源

2016-08-24 User9902911

有關angularJS持久性數據，你可以使用3種方式：localStorage的;實施Angular服務;或者堅持你在$ scope變量上需要的東西。你有沒有嘗試過嗎？ –

我嘗試使用$ scope變量技術發佈在這裏 - http://stackoverflow.com/questions/24638375/keep-checkbox-checked-after-navigating-away-from-page但它沒有爲我工作。你有使用localStorage或Angular Service來做這項工作的例子嗎？ – User9902911

將其作爲答案發布。希望能幫助到你！ –

正如我所說，你可以通過3種不同的方式做到這一點。

1 - 使用$範圍變量

在你有一個主控制器通常設置在機身的index.html，你可以與其他控制器訪問AngularJS。您可以使用它將數據存儲在$ scope變量中。參見例如：

的index.html：

<body ng-controller="DefaultController">

DefaultController.js：

angular.module('YourModule').controller('DefaultController', ['$scope', function ($scope) { 
    //Storing Your data 
    $scope.isChecked = true; 
}]);

YourCheckBoxController.js

angular.module('YourModule').controller('YourCheckBoxController', ['$scope', function ($scope) { 
    //Here you gonna access the $scope variable, that does not change on page reload 
    $scope.accessingTheVariable= function() { 
     if ($scope.isChecked) { 
      //Select All 
     } 
     else { 
      //Do not Select All 
     } 
    }; 

    $scope.onCheckBoxToggle { 
     $scope.isChecked = _this.uiChoices.selectAll; 
     //More code 
    }; 
}]);

2-使用localStorage的

//The property exists 
if (localStorage.hasOwnProperty("isChecked")) { 
    if(localStorage.isChecked) { 
     //Select All 
    } 
    else { 
     //Do not Select All 
    } 
} 


//To set localStorage.isChecked 
localStorage.setItem("isChecked", _this.uiChoices.selectAll);

3 - 角服務（廠）

在這種情況下，你應該創建一個可以從每一個控制器在你的項目中訪問的服務（有用的，如果你要使用多於1個控制器上的數據）。外觀：

YourService.js

angular.module('YouModule').factory('YouService', function() { 
    var data = 
    { 
     IsChecked = true 
    }; 

    data.buildIsChecked = function (isChecked) { 
     this.IsChecked = isChecked; 
    }; 

    return data; 
});

YourIsCheckedController.js：

angular.module('YourModule').controller('YourCheckBoxController', 
    ['$scope', 'YouService', function ($scope, YouService) { 

    //Setting the service 
    //... 
    YouService.buildIsChecked(_this.uiChoices.selectAll); 

    //Accessing the service Information (it could be accessed from any Controller, just remember to set Service Name at begin of the module declaration) 
    var isChecked = MenuService.IsChecked; 
}]);

來源

2016-08-24 16:26:12

感謝您的投入！我會嘗試所有這些，看看哪一個最好！一旦我開始工作，會回覆。 – User9902911

您需要一種方法來保存這些檢查過的設備。

嘗試localStorage。基本上，當你選擇一個設備，將其添加到一個數組，像checkedDevices並添加此數組localStorage的，像這樣：

localStorage.setItem("devices", JSON.stringify(checkedDevices));

然後，在你的控制器的開始，請從localStorage的數組：

var devices = JSON.parse(localStorage.getItem("devices"));

然後，檢查是否有物品，如果這樣做，設置selectAll爲false：

if (devices.length > 0){ 
    this.selectAll = false; 
}else{ 
    this.selectAll = true; 
}

然後，對於每一個設備，檢查它是否在devices數組，如果是，請選擇它。

來源

2016-08-24 15:34:59

回答

相關問題