1. ホーム
  2. angularjs

[解決済み] Angular js init ng-modelのデフォルト値からの起動

2022-07-24 17:22:26

質問

データベースから値を読み込むフォームがあるとします。 ng-modelはどのように初期化するのでしょうか?

例を挙げます。

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

私のコントローラでは、$scope.cardは初期状態では未定義です。 このようなことをする以外に方法はないのでしょうか?

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

どのように解決するのですか?

これは新しい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;
});

お役に立てれば幸いです。