イオンフレームワークでチェックボックスを入手して設定する（AngularJS）

StackOverflow https://stackoverflow.com//questions/25080212

質問

イオンのチェックボックスの状態をユーザが変更し、LocalStorageに保存してから、後で再度ロードするために使用する必要があります。そのため、設定を記録します。

私のトグルコードは次のようになります：

<li class="item item-toggle">
     National Insurance {{ni_toggle}}
     <label class="toggle toggle-positive">
       <input type="checkbox" ng-model="ni_toggle" ng-click="updateLocalStorage()" id="has_national_insurance" name="has_national_insurance">
       <div class="track">
         <div class="handle"></div>
       </div>
     </label>
  </li>
.

と私のコントローラーでは、次のとおりです。

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

.controller('SettingsCtrl', function($scope, $ionicPlatform) {
    $ionicPlatform.ready(function() {
    // Ready functions

    });

 $scope.updateLocalStorage = function() {

    window.localStorage.setItem( 'has_national_insurance', $scope.ni_toggle );
    console.log( $scope.ni_toggle );

}

})
.

しかし、undefinedとしてコンソールにログアウトします。$scope.ni_toggle = false;を明示的に設定した場合、それはFalseをログに記録し、チェックボックスをオンに切り替えたときにtrueに更新されません。

編集：

app.js：

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

  .run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      if(window.cordova && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      }
      if(window.StatusBar) {
        // org.apache.cordova.statusbar required
        StatusBar.styleDefault();
      }

    });
  })



.config(function($stateProvider, $urlRouterProvider) {

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

    // setup an abstract state for the tabs directive
    .state('tab', {
      url: "/tab",
      abstract: true,
      templateUrl: "templates/tabs.html"
    })

    // Each tab has its own nav history stack:

    .state('tab.dash', {
      url: '/dash',
      views: {
        'tab-dash': {
          templateUrl: 'templates/tab-dash.html',
          controller: 'DashCtrl'
        }
      }
    })

    .state('tab.settings', {
      url: '/settings',
      views: {
        'tab-settings': {
          templateUrl: 'templates/tab-settings.html',
          controller: 'SettingsCtrl'
        }
      }
    })

    .state('tab.info', {
      url: '/info',
      views: {
        'tab-info': {
          templateUrl: 'templates/tab-info.html',
          controller: 'InfoCtrl'
        }
      }
    })

        .state('tab.about', {
      url: '/about',
      views: {
        'tab-about': {
          templateUrl: 'templates/tab-about.html',
          controller: 'AboutCtrl'
        }
      }
    })

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/dash');

});
.

Controllers.js：

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

.controller('DashCtrl', function($scope) {
})

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

    });

    $scope.ni_toggle = $window.localStorage.getItem('has_national_insurance') === "true";

    $scope.updateLocalStorage = function() {
            $window.localStorage.setItem( 'has_national_insurance', $scope.ni_toggle );
            console.log( $scope.ni_toggle );
        }   


})

.controller('InfoCtrl', function($scope) {
})

.controller('AboutCtrl', function($scope) {
});
.

テンプレート/ tab-settings.html：

<li class="item item-toggle">
     National Insurance {{ni_toggle}}
     <label class="toggle toggle-positive">
       <input type="checkbox" ng-model="ni_toggle" ng-change="updateLocalStorage()" id="has_national_insurance" name="has_national_insurance">
       <div class="track">
         <div class="handle"></div>
       </div>
     </label>
  </li>
.

問題の動作

役に立ちましたか？

解決

私はイオンの奇妙さに精通していません（あるならば）、一般的なJSの観点からは、あなたのコードにいくつかの問題があるようです。

  1. ni_toggleを初期化していません。

  2. ngClickを使用しているの前にの前にngModelディレクティブによって更新されました。
    代わりにngChangeを使用する必要があります。

  3. 角度では、$windowの代わりにwindowを使用する必要があります（ただし、多くの場合（たとえばテスト））。

  4. localStorageは文字列（ブール値ではない）しか保存できません。したがって、falseを渡しても、それは'false'として格納されます。これは、ブール値にキャストされるときにtrueと同じです。

    5. 上記を考慮に入れると、コードは次のようになります。

    <input type="checkbox" ng-model="ni_toggle" ng-change="updateLocalStorage()" ... />

.controller('SettingsCtrl', function($scope, $window, $ionicPlatform) {
    $ionicPlatform.ready(function() {
        // Ready functions
    });

    $scope.ni_toggle = $window.localStorage.getItem('has_national_insurance') === 'true';
    $scope.updateLocalStorage = function () {
        $window.localStorage.setItem('has_national_insurance', $scope.ni_toggle);
        console.log($scope.ni_toggle);
    };
});
    .

    また、この short demo 。< / P>

他のヒント

私はイオンアプリでのユーザー情報Aを表示するための同様の状況に遭遇しました。私の元のソースコードが私の前にありませんが、私はこれがあなたがそれをする必要があるかどうか私は確信しています。

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

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

        this.toggle = true; // make sure its defined somewhere

        $scope.ni_toggle = function() {
            return this.toggle;
        }

        $scope.updateLocalStorage = function() {
            window.localStorage.setItem(
                'has_national_insureance',
                $scope.ni_toggle
            );
            console.log($scope.ni_toggle);
        }

    });
.

これがあなたが正しい方向に進むことを願っています。

編集 エキスパートシステムの答えを見てください。彼は私ができるよりも良い方法に答えた。

コントローラ

で関数定義を必要としない 
 <script>
 angular.module('checkboxExample', [])
.controller('ExampleController', ['$scope', function($scope) {
  $scope.checkboxModel = {
   value1 : true,
   value2 : 'YES'
 };
}]);
. 

<form name="myForm" ng-controller="ExampleController">
<label>Value1:
<input type="checkbox" ng-model="checkboxModel.value1">
</label><br/>
<label>Value2:
<input type="checkbox" ng-model="checkboxModel.value2"
       ng-true-value="'YES'" ng-false-value="'NO'">
</label><br/>
<tt>value1 = {{checkboxModel.value1}}</tt><br/>
<tt>value2 = {{checkboxModel.value2}}</tt><br/>
.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top