2

好的，所以我的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 。

在我的 ion-view 中，我将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模块。

任何帮助，将不胜感激。

4

2 回答 2

0

如果你想存储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) }

于 2016-12-31T00:53:59.303 回答
0

不要使用 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-model (config.selectedVerse) 应采用所选选项的值字段。

至于保存到本地存储，我不熟悉该插件的语法，但您应该能够使用 window.localStorage 语法获取和设置数据（确保在获取和设置数据时对数据进行字符串化和解析）以保存它。

window.localStorage['myData'] = JSON.stringify(config);
$scope.myData = JSON.parse(window.localStorage[request];
于 2016-12-30T23:16:55.223 回答