使用Angular-Local存储在离子中存储并检索阵列值

Question

好吧，我的代码中有一个控制器 SettingsCtrl，为：

.controller('SettingsCtrl' , function($scope, localStorageService) {
    $scope.verseOptions = [5 , 10, 15, 20];
    $scope.verses = JSON.stringify($scope.verseOptions);
    console.log($scope.verses);
    console.log($scope.verses[3]);
    $scope.dd = JSON.parse($scope.verses);
    console.log($scope.dd);
    var d = $scope.dd[1];
    console.log(d);
    $scope.config = {
        numVerses: localStorage.getItem('numVerses' , 23),
        selectedVerse : localStorage.setItem('verseOption' , d) || $scope.verseOptions[1]
    };
    $scope.save = function() {
     console.log($scope.config.numVerses);
     localStorage.setItem('numVerses', $scope.config.numVerses);
     localStorage.setItem('verseOption' , $scope.config.selectedVerse);
     console.log($scope.config.selectedVerse);
   };
})

给定数组经文和config.selectedverse。

在我的离子视图中，我将config.numVerses值加载到输入框中，而config.verses在下拉列表中为：

<label class="item item-input item-label">
        <span class="input-label">Number Of Verses</span>
        <input type="text" ng-model="config.numVerses">
        </label>
        <label class="item item-input item-select">
            <div class="input-label">
                Verses
            </div>
            <select ng-model='config.selectedVerse'>
                <option ng-repeat='verse in dd'>
                    {{verse}}
                </option>
            </select>
        </label>

单击视图中的保存按钮时，它会调用控制器的save()。使用save（）函数，我想将数组元素保存在localstorage中。例如，如果我从下拉列表中选择5，则应该保存具有值5的数组索引，以便可以在下一个启动时重新加载。

可以重新加载。

对我来说，保存和加载数字值有效，但是选择的值（从下拉列表中不起作用）。当我尝试在下一个启动时重新加载值时，Numervers按原样显示显示，但是下拉词显示为空白选项spection

ps。我使用的是Angular-Local存储模块。

任何帮助将不胜感激。

Answer 1

，而不是使用ng-repeat循环浏览您的经文列表，请尝试使用angulars ng-options

这使您可以自动将数组或JSON对象绑定到选择选项，并将这些数据结构的不同方面跟踪到选项值字段。

。

因此，您可以按这样的数组索引跟踪：

<select ng-model='config.selectedVerse' 
        ng-options='verse for (idx, verse) in dd track by idx'>
</select>

产生以下HTML：

<select ng-model="config.selectedVerse" ng-options="verse for (idx, verse) in dd track by idx" class="ng-pristine ng-valid ng-empty ng-touched">
    <option label="5" value="0">5</option>
    <option label="10" value="1">10</option>
    <option label="15" value="2">15</option>
    <option label="20" value="3">20</option>
</select>

击打后，保存您的ng模型（config.selectedverse）应从所选选项中占据值字段。

为了保存到本地存储，我不熟悉该插件的语法，但是您应该能够使用window.localstorage语法获取并设置数据（确保在获取和设置它的情况下串制和解析数据）保存它。

window.localStorage['myData'] = JSON.stringify(config);
$scope.myData = JSON.parse(window.localStorage[request];

Answer 2

如果要在本地存储中存储numVerses数组和selectedVerse，请在save（）上执行此操作。要将数组推入本地存储，您必须在检索后推动和解析之前将其串起。

$scope.config = {

numVerse:localStorage.getItem('numVerses')?JSON.parse(localStorage.getItem('numVerses')):[],
 selectedVerse:localStorage.getItem('selectedVerse')?JSON.parse(localStorage.getItem('selectedVerse')):null

};

$scope.save = function (){

$scope.config.numVerses.push($scope.selectedVerse)

localStorage.setItem('numVerses', JSON.stringify($scope.config.numVerses))

localStorage.setItem('selectedVerse', $scope.selected verse) }