1

3 つのバインドされたイベントを持つ基本的な入力コントロールがあります。コントロールは年の値を表示します。各イベントで、コントロールはその値を Cookie に保存して、ページの更新時に現在の値が同じままになるようにする必要があります。

イベント:

  1. onchangeそれ自体のinput（明らかに）
  2. input増分の左にある矢印
  3. 右への矢印はそれを減らします

これらすべてを JQuery で行う方法は知っていますが、このコントローラーを Angular でセットアップしようとしています。インクリメント/デクリメントするとコントロールはうまく機能しますが、ユーザーが手動で入力を編集すると、インクリメント/デクリメント機能は機能しません。私はまた、これがこのタイプのコントロールを構築するための非常に貧弱な方法であることを疑っています.以下は私の試みたコードです:

JS:

myApp.controller('TimeframeCtrl', ['$scope',
                                   '$cookieStore',
                                   function ($scope, $cookieStore) {
  // If year cookie doesn't exist
  if($cookieStore.get('year') == null) { 
    // Create year cookie
    $cookieStore.put('year', 2014); 
  }
  // Decrement year
  $scope.prevYear = function() {
    $scope.year = $scope.year - 1;
    $cookieStore.put('year', $cookieStore.get('year') - 1); 
  }
  // Increment year
  $scope.nextYear = function() {
    $scope.year = parseInt($scope.year) + 1;
    $cookieStore.put('year', $cookieStore.get('year') + 1); 
  }
  // User manually changes year
  $scope.yearChange = function() {
    // Not implemented
  }
  // Set timeframe control value
  $scope.year = $cookieStore.get('year');
}]);

HTML:

<form class="navbar-form pull-left" ng-controller="TimeframeCtrl">
  <i class="fa fa-angle-left" ng-click="prevYear()"></i>
  <input class="form-control" type="text" value="{{year}}" placeholder="Year" ng-blur="yearChange()"/>
  <i class="fa fa-angle-right" ng-click="nextYear()"></i>
</form>
4

2 に答える 2

4

ng-modelバインドに使用$scope.year

<input class="form-control" type="text" ng-model="year" placeholder="Year" />

次に、$watch変更を検出するために使用します

 $scope.$watch('year', function() {
      // year has been manually changed, put your save logic here
   });

ただし、実際には、コンポーネントを再利用できるようになるよりも、コントローラーではなくディレクティブを作成する必要があります

于 2014-06-14T21:26:48.607 に答える
1

あなたはそのようにすることができます：

html

<input class="form-control" type="text" ng-model="year" placeholder="Year" ng-change="yearChange()"/>

その後：

js

$scope.yearChange = function() {
  $cookieStore.put('year', $scope.year); 
}
于 2014-06-14T21:53:04.567 に答える