在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>