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);
   };
})

给定数组verseOptions和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的数组索引，以便下次启动时可以重新加载。

对我来说，保存和加载numVerses值是有效的，但是selectedVerse值（来自下拉列表不起作用）。当我尝试在下次启动时重新加载值时，numVerses按原样显示，但下拉显示为选中的空白选项

PS。我正在使用angular-local-storage模块。

任何帮助都将不胜感激。

Answer 1

尝试使用Angulars ng-options

而不是使用ng-repeat来循环阅读经文列表

这允许您自动将数组或json对象绑定到select-option，并将这些数据结构的不同方面跟踪到选项值字段。

所以你可以像这样跟踪数组索引：

<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-model（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) }

使用离子

2 个答案: