1

私はユーザー設定ページを開発しており、AngularJS を使用してデータの状態を制御することにしました。

私が達成したいのは、現在のユーザーの設定を表示し、ユーザーが必要に応じてそれらを編集したり、変更をキャンセルしたり、変更を保存して送信したりできるページです。ラベルと入力コントロールをモデルにバインドして、ユーザーがメール アドレスを変更したときに正しく反映されるようにしました。

ちなみに、私はこの例#3に基づいて作業しています: http://code.angularjs.org/1.0.0rc12/docs-1.0.0rc12/guide/forms

私の質問は、ページのデフォルト値に関連しています。モデルは Javascript でオブジェクトとして定義されているためです。$scope.master= {};上記のリンクでは、フレームワークを使用して静的ページを生成し、サーバーからjsonオブジェクトを取得していないことを除いて、ここでデフォルト値を設定できます。私のページはすべて組み込みの scala で記述されているため、サーバー側の値にアクセスします。サーバー側で取得した情報を取得し、クライアント側の JavaScript がアクセスできるオブジェクトに変換する最良の方法は何ですか?

4

2 に答える 2

1

いくつかの選択肢があります。私が行う方法は、(WebSocket などを介して) 初期状態を JSON として Angular にプッシュするか、HTTP 呼び出しを介してサーバーから Angular にプルさせることです。

ng-init タグを使用してページをレンダリングして初期状態を設定することもできますが、この方法は奇妙に思えます。

<div ng-controller="FormController" ng-init="formData = {}">
  <form>
     <input ng-model="formData.input1" ng-init="formData.input1 = 'initialValue'>
  </form>
</div>
于 2012-06-14T12:15:38.867 に答える
1

ASP.NET と Dapper-Dot-Net を使用しています。次の手法を使用して、データをページに取り込み、Angular スコープに取り込みます。それはあなたの環境にかなり転送可能でなければなりません。

  1. サーバー側のページで DataTransferObject クラスを定義し、DtoJson というパブリック文字列を定義して、クラス インスタンスのシリアル化されたバージョンを保持します。

    private class DataTransferObject{
  public User User;
  public List<Project> Projects
}

public string DtoJson;

var dto=new DataTransferObject();
var userName="however you get a username";
dto.User=User.Get(userName);  // I already have a User class
var sql="select * from projects where user_name=:UserName";
var p=new DynamicParameters();
p.Add(":UserId", dto.User.ID);
dto.Projects=Project.Query<Project>(sql, p);  // returns a list of Project

// I use json.net to convert the Dto to json and expose it as a public variable
var DtoJson=Json.Convert(dto);  // approximate syntax but you get the idea

  2. クライアント側では、ページの先頭にスクリプト タグを配置し、DtoJson を挿入してグローバル スコープに入れます。

    <script>var dto=<%=DtoJson%>;</script>

  3. ページの下部に、Angular コントローラー ファイルであるスクリプト src="pageName.js" があります。私が言うコントローラの中で

    $scope.dto=dto;
console.log($scope.dto);

  4. これで、サーバー側で作成された json がコントローラーのスコープ内にあり、 {{dto.User.FIRST_NAME}} および {{dto.Projects[0].ID}} ng-repeat="for p にデータ バインドできます。 in dto.Projects」など

それが理にかなっていることを願っています。

ピーター

于 2012-06-14T19:54:20.897 に答える