126

データベースからロードされた値を持つフォームがあるとします。ng-model をどのように初期化しますか?

例：

<input name="card[description]" ng-model="card.description" value="Visa-4242">

私のコントローラーでは、 $scope.card は最初は未定義です。このようなことをする以外に方法はありますか？

$scope.card = {
  description: $('myinput').val()
}
4

14 に答える 14

237

@bleshが提案することを実行するようにアプリを作り直すことができない場合（JSONデータを$httpまたは$resourceでプルダウンし、$ scopeに入力する）、代わりにng-initを使用できます。

<input name="card[description]" ng-model="card.description" ng-init="card.description='Visa-4242'">

AngularJSも参照してください-ng-modelが使用されている場合、入力テキストボックスのValue属性は無視されますか？

于 2012-12-08T06:31:47.137 に答える
136

これは、新しい Angular アプリケーションでよくある間違いです。回避できるのであれば、サーバー上の HTML に値を書きたくないでしょう。実際、サーバーで HTML を完全にレンダリングすることから逃れることができれば、なおさらです。

理想的には、Angular HTML テンプレートを送信してから、JSON で $http を介して値を取得し、それらをスコープに入れます。

したがって、可能であれば、次のようにします。

app.controller('MyController', function($scope, $http) {
    $http.get('/getCardInfo.php', function(data) {
       $scope.card = data;
    });
});

<input type="text" ng-model="card.description" />

値をサーバーから HTML にレンダリングする必要がある場合は、値をグローバル変数に入れ、$window でアクセスできます。

ページのヘッダーに次のように記述します。

<head>
   <script>
       window.card = { description: 'foo' };
   </script>
</head>

そして、コントローラーでは次のようになります。

app.controller('MyController', function($scope, $window) {
   $scope.card = $window.card;
});

それが役立つことを願っています。

于 2012-12-07T21:24:44.350 に答える
60

これは明らかに不足していますが、AngularJS の修正は簡単に追加できます。入力フィールドからモデル値を設定するクイック ディレクティブを記述するだけです。

<input name="card[description]" value="Visa-4242" ng-model="card.description" ng-initial>

これが私のバージョンです：

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

app.directive('ngInitial', function() {
  return {
    restrict: 'A',
    controller: [
      '$scope', '$element', '$attrs', '$parse', function($scope, $element, $attrs, $parse) {
        var getter, setter, val;
        val = $attrs.ngInitial || $attrs.value;
        getter = $parse($attrs.ngModel);
        setter = getter.assign;
        setter($scope, val);
      }
    ]
  };
});
于 2013-07-24T01:12:13.033 に答える
7

カスタム ディレクティブを使用できます (textarea、select、radio、checkbox をサポート)。このブログ投稿をチェックしてください https://glaucocustodio.github.io/2014/10/20/init-ng-model-from-form-フィールド属性/ .

于 2014-10-20T20:09:30.943 に答える
6

HTML コード内で使用することもできます。 ng-init="card.description = 12345"

Angular では推奨されていません。前述のように、コントローラーのみを使用する必要があります。

しかし、それは機能します:)

于 2014-10-16T04:30:25.390 に答える
3

上記のhttps://stackoverflow.com/a/17823590/584761の Kevin Stone のアプローチが気に入った場合は 、「input」などの特定のタグのディレクティブを記述して、より簡単なアプローチを検討してください。 

app.directive('input', function ($parse) {
    return {
        restrict: 'E',
        require: '?ngModel',
        link: function (scope, element, attrs) {
            if (attrs.ngModel) {
                val = attrs.value || element.text();
                $parse(attrs.ngModel).assign(scope, val);
            }
        }
    }; });

この方法を使えば、すべてのタグに ng-initial を追加することを心配する必要はありません。モデルの値をタグの value 属性に自動的に設定します。value 属性を設定しない場合、デフォルトで空の文字列になります。

于 2014-03-21T19:07:39.943 に答える
1

これは、上記のアイデアのより一般的なバージョンです...モデルに値があるかどうかを単純にチェックし、ない場合は値をモデルに設定します。

JS:

function defaultValueDirective() {
    return {
        restrict: 'A',
        controller: [
            '$scope', '$attrs', '$parse',
            function ($scope, $attrs, $parse) {
                var getter = $parse($attrs.ngModel);
                var setter = getter.assign;
                var value = getter();
                if (value === undefined || value === null) {
                    var defaultValueGetter = $parse($attrs.defaultValue);
                    setter($scope, defaultValueGetter());
                }
            }
        ]
    }
}

HTML（使用例）：

<select class="form-control"
        ng-options="v for (i, v) in compressionMethods"
        ng-model="action.parameters.Method"
        default-value="'LZMA2'"></select>
于 2016-01-17T22:12:19.780 に答える
0

@MarkRajcokの提案を試してみました。文字列値に対して機能します（Visa-4242）。このフィドルを参照してください。

フィドルから：

フィドルで行われるのと同じことはng-repeat、誰もが推奨できるを使用して行うことができます。しかし、@ Mark Rajcokからの回答を読んだ後、プロファイルの配列を持つフォームに対して同じことを試してみたかっただけです。$ scope.profiles = [{}、{}];になるまで、問題はありません。コントローラのコード。このコードを削除すると、エラーが発生します。しかし、通常のシナリオ$scope.profiles = [{},{}]; では、サーバーからhtmlを印刷またはエコーするときに印刷できません。<input name="card[description]" ng-model="card.description" ng-init="card.description='Visa-4242'">サーバーからJavaScript部分をエコーすることなく、@ Mark Rajcokがのような文字列値に対して行ったのと同様の方法で、上記を実行することは可能でしょうか。

于 2013-02-20T03:32:49.947 に答える
0

のような URL に init 値がある場合mypage/id、angular JS のコントローラーでlocation.pathnameid を見つけて、必要なモデルに割り当てることができます。

于 2014-07-31T05:49:40.810 に答える
0

選択要素のサポートを Ryan Montgomery の「修正」に追加しました

<select class="input-control" ng-model="regCompModel.numberOfEmployeeId" ng-initial>
    <option value="1af38656-a752-4a98-a827-004a0767a52d"> More than 500</option>
    <option value="233a2783-db42-4fdb-b191-0f97d2d9fd43"> Between 250 and 500</option>
    <option value="2bab0669-550c-4555-ae9f-1fdafdb872e5"> Between 100 and 250</option>
    <option value="d471e43b-196c-46e0-9b32-21e24e5469b4"> Between 50 and 100</option>
    <option value="ccdad63f-69be-449f-8b2c-25f844dd19c1"> Between 20 and 50</option>
    <option value="e00637a2-e3e8-4883-9e11-94e58af6e4b7" selected> Less then 20</option>
</select>

app.directive('ngInitial', function () {
return {
    restrict: 'A',
    controller: ['$scope', '$element', '$attrs', '$parse', function ($scope, $element, $attrs, $parse) {
        val = $attrs.sbInitial || $attrs.value || $element.val() || $element.text()
        getter = $parse($attrs.ngModel)
        setter = getter.assign
        setter($scope, val)
    }]
}

});

于 2014-02-01T10:45:12.877 に答える