javascript - 在 AngularJS 选项卡 View 中设置默认单选/输入/复选框值

Question

我有一个使用 Ionic Framework 的 AngularJS 应用程序，它有一个带有“设置”选项卡的选项卡式 View ，该选项卡将存储用户使用选项。我想在应用程序最初启动时使用这些设置，虽然我可以使用 localStorage 中存储的值，但我希望能够检查设置选项卡上设置的选项。

就目前而言，如果您加载设置选项卡，您将看到其中一个单选按钮在加载时将其自身从关闭设置为打开，这就是每当我设置打开的默认值时发生的情况。如何在应用程序启动时设置此设置，而不是在打开选项卡本身时设置？

这就是我的controllers.js 的样子:

angular.module('starter.controllers', [])

.controller('DashCtrl', function($scope, $window, $ionicPlatform) {

    $ionicPlatform.ready(function() {
        if ( ! $window.localStorage.getItem( 'grossoption' ) ) {
        $window.localStorage.setItem( 'grossoption', 'year' );
    }

    if ( ! $window.localStorage.getItem( 'resultoption' ) ) {
        $window.localStorage.setItem( 'resultoption', 'month' );
    }
    });

    $scope.grossOptionsList = [
    { text: "Year", value: "year" },
    { text: "Month", value: "month" },
    { text: "Week", value: "week" },
    { text: "Day", value: "day" }
    ];

    $scope.resultsOptionsList = [
    { text: "Year", value: "year" },
    { text: "Month", value: "month" },
    { text: "Week", value: "week" },
    { text: "Day", value: "day" }
    ];

// Default values
    $scope.data = {};
    $scope.data.grossOptions = 'year';
    $scope.data.resultOptions = 'month';


    $scope.updateGrossOptions = function(item) {
      $window.localStorage.setItem( 'grossoption', item.value );
        console.log( 'Gross option: ' + item.value );
    }

    $scope.updateResultOptions = function(item) {
      $window.localStorage.setItem( 'resultoption', item.value );
        console.log( 'Results option: ' + item.value );
    }

})

.controller('SettingsCtrl', function($scope, $window, $ionicPlatform) {
$ionicPlatform.ready(function() {


    if ( ! $window.localStorage.getItem( 'toggle1' ) ) {
        $window.localStorage.setItem( 'toggle1', 'true' );
    }

    if ( ! $window.localStorage.getItem( 'toggle2' ) ) {
        $window.localStorage.setItem( 'toggle2', 'false' );
    }


});

$scope.data = {};
$scope.data.toggle1 = $window.localStorage.getItem( 'toggle1' ) === "true";
$scope.data.toggle2 = $window.localStorage.getItem( 'toggle2' ) === "true";

$scope.update_toggle1 = function() {
    $window.localStorage.setItem( 'toggle1', $scope.data.toggle1 );
    console.log( 'Toggle 1: ' + $scope.data.toggle1 );
}

$scope.update_toggle2 = function() {
    $window.localStorage.setItem( 'toggle2', $scope.data.toggle2 );
    console.log( 'Toggle 2: ' + $scope.data.toggle2 );
}

})我已经设置了an example plnkr here它显示了当您加载“设置”选项卡时我的应用程序当前的行为。

感谢有关如何在 Angular 中最好地解决此问题的任何反馈。

Answer 1

您可以在“ng-checked”中使用“if”条件，如下所示:

<ion-toggle ng-checked="(myVar== 1)?true:false;" ng-change="myFunc(myVar)" ng-model="myVar" toggle-class="toggle-calm">{{myVar}}</ion-toggle>