ng-modelで入力要素の異なる値を表示するにはどうすればよいですか?

メンバーサウンド

コントローラに、ページネーションテーブルのページのインデックス(0から開始)を追跡する変数がある場合:

var page {
  pageNumber: 0;
}

質問:このpageNumber変数をHTMLで表示するにはどうすればよいですか?ただし、常に+1ずつ増加しますか?(index = 0ページは明らかに最初のページであるため、次のように表示する必要がありますPage 1

<input type="text" ng-model="page.pageNumber">

また、モデルが更新されると、入力の値が自動的に変更されます(ここでも+1ずつ増加します)。

ナガサンディープ

これは$ formattersと$ parsersのユースケースだと思います。これらはモデルのプロパティを操作するため、モデルにダミーのプロパティを作成する必要はありません。ドキュメントはこちらこれが$ formattersと$ parsersのユースケースでない場合は、私を訂正してください。

下記を参照してください。

HTMLマークアップ

<body ng-app="app" ng-controller="mainCtrl">   
   {{page}}
   <input paginated-index type="text" ng-model="page">   
</body>

js

var app = angular.module('app', []);

app.controller('mainCtrl', function($scope) {
  $scope.page = 0;
});

app.directive('paginatedIndex', function()
{
    return{
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ngModelController)
        {
            ngModelController.$formatters.push(function(value)
            {
                return value+1;
            })

            ngModelController.$parsers.push(function(value)
            {
                return value-1;
            })   
        }
    }
});

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

ng-modelを使用して入力フィールドに値を表示するにはどうすればよいですか?

分類Dev

ng-modelを介して入力フィールドの値の角度設定を通知するにはどうすればよいですか?

分類Dev

ng-modelを介して今日の日付を日付入力に追加するにはどうすればよいですか?

分類Dev

ng-Modelをイオンラジオ要素で使用するにはどうすればよいですか?

分類Dev

`ng-if`を使用して要素を表示し、アプリの外部から値を動的に更新するにはどうすればよいですか?

分類Dev

ng-showで同じ要素を複数回表示するにはどうすればよいですか?

分類Dev

javascriptのng-repeatから動的ng-modelを取得するにはどうすればよいですか?

分類Dev

Angular 2 ng-bootstrapの先行入力のデフォルト/初期値を設定するにはどうすればよいですか?

分類Dev

入力フィールドがチェックボックスから非表示になっているときにng-modelプレビューデータを空にするにはどうすればよいですか?

分類Dev

オプション値をng-bindで表示するにはどうすればよいですか?

分類Dev

ng-model属性を使用して入力ビューに「%」文字を追加するにはどうすればよいですか?

分類Dev

ckEditorに二重引用符を入力し、AngularJS ng-bindで正しく表示するにはどうすればよいですか?

分類Dev

1つの関数で複数のng-modelを使用するにはどうすればよいですか?

分類Dev

ng-repeatでng-modelを動的に更新するにはどうすればよいですか?

分類Dev

分度器のng-autocompleteで要素を選択するにはどうすればよいですか?

分類Dev

1つのphp値でng-if値を確認するにはどうすればよいですか?

分類Dev

Angularのng-templateで表示/非表示を切り替えるにはどうすればよいですか?

分類Dev

このli要素をng-repeatから削除するにはどうすればよいですか?

分類Dev

要素のクラスをng-repeatから変更するにはどうすればよいですか?

分類Dev

ng-repeatによって生成された最初のラジオ入力を確認するにはどうすればよいですか?

分類Dev

角度4でng2-smart-tableの列に動的にデータを入力するにはどうすればよいですか?

分類Dev

ng-repeat内で変数の値を設定するにはどうすればよいですか?

分類Dev

Angularjsで2つのng-module値を乗算するにはどうすればよいですか?

分類Dev

Angular js ng-repeatでキーの重複値を削除するにはどうすればよいですか?

分類Dev

selectを変更せずに関数に渡す<select>の初期ng-model値を設定するにはどうすればよいですか?

分類Dev

ng-vとtsc-vの2つの異なるバージョンのTypeScriptが表示されるのはなぜですか?VSCodeに古いバージョン(2.6.2)を使用させるにはどうすればよいですか?

分類Dev

ng-modelの初期値をangularjsで空の文字列に設定するにはどうすればよいですか?

分類Dev

複数のngをネストするにはどうすればよいですか?適切な場合はどうすればよいですか?

分類Dev

AngularJSでng-changeを入力するときにフォームを送信するにはどうすればよいですか?

Related 関連記事

  1. 1

    ng-modelを使用して入力フィールドに値を表示するにはどうすればよいですか?

  2. 2

    ng-modelを介して入力フィールドの値の角度設定を通知するにはどうすればよいですか?

  3. 3

    ng-modelを介して今日の日付を日付入力に追加するにはどうすればよいですか?

  4. 4

    ng-Modelをイオンラジオ要素で使用するにはどうすればよいですか?

  5. 5

    `ng-if`を使用して要素を表示し、アプリの外部から値を動的に更新するにはどうすればよいですか?

  6. 6

    ng-showで同じ要素を複数回表示するにはどうすればよいですか?

  7. 7

    javascriptのng-repeatから動的ng-modelを取得するにはどうすればよいですか?

  8. 8

    Angular 2 ng-bootstrapの先行入力のデフォルト/初期値を設定するにはどうすればよいですか?

  9. 9

    入力フィールドがチェックボックスから非表示になっているときにng-modelプレビューデータを空にするにはどうすればよいですか?

  10. 10

    オプション値をng-bindで表示するにはどうすればよいですか?

  11. 11

    ng-model属性を使用して入力ビューに「%」文字を追加するにはどうすればよいですか?

  12. 12

    ckEditorに二重引用符を入力し、AngularJS ng-bindで正しく表示するにはどうすればよいですか?

  13. 13

    1つの関数で複数のng-modelを使用するにはどうすればよいですか?

  14. 14

    ng-repeatでng-modelを動的に更新するにはどうすればよいですか?

  15. 15

    分度器のng-autocompleteで要素を選択するにはどうすればよいですか?

  16. 16

    1つのphp値でng-if値を確認するにはどうすればよいですか?

  17. 17

    Angularのng-templateで表示/非表示を切り替えるにはどうすればよいですか?

  18. 18

    このli要素をng-repeatから削除するにはどうすればよいですか?

  19. 19

    要素のクラスをng-repeatから変更するにはどうすればよいですか?

  20. 20

    ng-repeatによって生成された最初のラジオ入力を確認するにはどうすればよいですか?

  21. 21

    角度4でng2-smart-tableの列に動的にデータを入力するにはどうすればよいですか?

  22. 22

    ng-repeat内で変数の値を設定するにはどうすればよいですか?

  23. 23

    Angularjsで2つのng-module値を乗算するにはどうすればよいですか?

  24. 24

    Angular js ng-repeatでキーの重複値を削除するにはどうすればよいですか?

  25. 25

    selectを変更せずに関数に渡す<select>の初期ng-model値を設定するにはどうすればよいですか?

  26. 26

    ng-vとtsc-vの2つの異なるバージョンのTypeScriptが表示されるのはなぜですか?VSCodeに古いバージョン(2.6.2)を使用させるにはどうすればよいですか?

  27. 27

    ng-modelの初期値をangularjsで空の文字列に設定するにはどうすればよいですか?

  28. 28

    複数のngをネストするにはどうすればよいですか?適切な場合はどうすればよいですか?

  29. 29

    AngularJSでng-changeを入力するときにフォームを送信するにはどうすればよいですか?

ホットタグ

アーカイブ