在AngularJS选项卡式视图中设置默认的单选/输入/复选框值

Question

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

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

这是我的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 );
}

}）我在这里设置了一个示例plnkr，该示例显示了在加载“设置”标签时我的应用当前具有的行为。

感谢有关如何最好地在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>