Question

我在我现有的应用程序中添加了少量的angularjs。我开始使用控制器来管理我的表单，这些表单都是由ajax提交的。表单当前使用jQuery的$.load()函数拉入页面，表单元素已经有值。

我希望我的模型已被分配到$ scope以获得这些值。例如：

<form>
  <input type="text" ng-model="user.firstName" value="Gregg" />
  <input type="text" ng-model="user.lastName" value="Bolinger" />
  <button ng-click="update(user)">Save</button>
</form>

然后在我的main.js文件中，我会有以下内容：

function UserCtrl($scope) {
  $scope.update = function(user) {
    // update the user
  };
}

原样，我的表单输入元素为空，因为ng-model为空。有没有办法用表格中的现有值初始化我的ng模型？

顺便说一下，我确实阅读了this SO Question这与我的相同，但是，我希望得到比一些窗口范围的全局变量更好的答案。

Answer 1

这里的一个重要问题是，在您当前的设置中，jQuery在角度世界之外运行。它没有角度范围的概念，也没有任何实际的访问方式而没有一点点hacky并反对角度如何工作，但如果你愿意，你可以这样做。

从jQuery加载数据后，您可以直接在角度模型中设置值，而不是设置表单的值。例如，如果您的页面类似于

<div class="wrapper" ng-controller="UserCtrl">
    <form>
        ... inputs as in your post ...
    </form>
</div>

然后在你的控制器内，输入

$scope.user = {
    firstName: "",
    lastName: ""
}

然后你实际上可以在任何时候从jQuery获得角度范围。在这个例子中，你只需要做

$(".wrapper").scope();

因此，在您的jQuery中，您可以在执行时获取数据，然后只需在范围内分配值。例如，您可以执行诸如

之类的操作

var user = ... load data with jquery here ...;
var scope = $(".wrapper").scope();
var $user = scope.user;
scope.$apply(function() {
    $user.firstName = user.firstName;
    $user.lastName = user.lastName;
});

理论上，这应该是你所追求的。

但我强烈建议您将数据加载移动到角度，因为这会让生活变得更轻松，更容易混淆。 Angular使数据加载就像jQuery一样简单，这很好，如果你使用ngResource（我个人喜欢），你可以通过简单的方式获取用户

User.get({ id: user_id_here })

就是这样。然后在你的控制器中，你只需要

$scope.user = User.get({ id: user_id_here })

表单将设置为：）

但正如我所说，如果您愿意，可以让它与您当前的结构内联运行

使用现有值填充AngularJS模型

1 个答案: