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，或者让 Angular 通过 HTTP 调用从服务器中提取它。

您也可以使用 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. 在我的页面底部我有一个脚本 src="pageName.js" 这是我的 Angular 控制器文件。在控制器里面我说

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

  4. 现在，在服务器端创建的 json 在我的控制器范围内，我可以将数据绑定到 {{dto.User.FIRST_NAME}} 和 {{dto.Projects[0].ID}} ng-repeat="for p在 dto.Projects 等

我希望这是有道理的。

彼得

于 2012-06-14T19:54:20.897 回答