web-dev-qa-db-ja.com

AngularJS ng-model-options getter-setter

angularバージョン1.3.8にアップグレードしました。

1.2.23バージョンを使用する場合、データフォームビューをモデルに、またはその逆に変換するディレクティブを作成しました。

これは私の指示です：

.directive('dateConverter', ['$filter', function ($filter) {

    return {

        require: 'ngModel',

        link: function (scope, element, attrs, ngModelController) {

            // Convert from view to model
            ngModelController.$parsers.Push(function (value) {
                return $filter('date')(new Date(date), 'yyyy-MM-ddTHH:mm:ss')
            });

            // Convert from model to view
            ngModelController.$formatters.Push(function (datetime) {
                return $filter('date')(datetime, 'MM/dd/yyyy');
            });
        }
    };
}]);

}）;

here バインディングのゲッターとセッターがサポートされるようになりましたが、使用方法bothゲッターandセッター。それを行う方法はありますか？つまり、ng-model-optionsは変換ディレクティブを置き換えることができますか？

ありがとう

angularjsgetter-setter
20
user2717436

ドキュメントは少しあいまいに見えるかもしれませんが、使用方法は非常に簡単です。するべきこと：

  1. HTML：

    <input ng-model="pageModel.myGetterSetterFunc"
ng-model-options=" {getterSetter: true }">

  2. jSコントローラーでは、実際のモデルの代わりに、パラメーターが送信されない場合に値を返す（+ストリッピングを適用する）関数を作成し、パラメーターが送信されるとモデルを更新します（+他の変更を適用します）。

ゲッター/セッターは、基本的にビュー値とモデル値の間の別の「レイヤー」です。

例：

$scope.pageModel.firstName = '';
$scope.pageModel.myGetterSetterFunc: function (value) {
  if (angular.isDefined(value)) {
    $scope.pageModel.firstName = value + '...';
  } else {        
    return $scope.pageModel.firstName.substr(0,
      $scope.pageModel.firstName.lastIndexOf('...')
    );
  }
}

デモプランカー： http://plnkr.co/edit/Zyzg6hLMLlOBdjeW4TO0?p=preview

（コンソールを確認- http://screencast.com/t/3SlMyGnscl ）

注：再利用性の観点からこのスケールがどのように変化するかを見るのは興味深いでしょう。これらのゲッター/セッターを外部化された再利用可能なメソッドとして作成し、それらのジェネレーターを用意することをお勧めします（データモデルはケースごとに異なるため）。また、コントローラーでは、これらのジェネレーターのみを呼び出します。ちょうど私の2セント。

39
Dragos Rusu

この質問はかなり古いですが、IE9 +（およびもちろん他のすべての関連ブラウザ）では、ng-modelのgetterSetterオプションに対して好むECMAScript 5 getter/setterメソッドを使用できます。

var person = {
    firstName: 'Jimmy',
    lastName: 'Smith',
    get fullName() {
        return this.firstName + ' ' + this.lastName;
    },
    set fullName (name) {
        var words = name.toString().split(' ');
        this.firstName = words[0] || '';
        this.lastName = words[1] || '';
    }
}

person.fullName = 'Jack Franklin';
console.log(person.firstName); // Jack
console.log(person.lastName) // Franklin

この例は http://javascriptplayground.com/blog/2013/12/es5-getters-setters/ からのものです

4
Gerfried