【问题标题】:how to populate a textfield on load in angularjs如何在angularjs中加载文本字段
【发布时间】:2016-09-01 14:36:11
【问题描述】:

我正在开发一个应用程序,我想在表单中加载一个文本字段,并禁用它进行编辑。我想回答两件事。实际上我的想法是从 url 中获取一个 mongodb_id 并将其传递给我的控制器并从 db 中获取相应的电子邮件 id 并将其填充到加载表单中,以便用户无法在该字段中进行编辑。

问题 1:我已经编写了使用 ID 获取电子邮件 ID 的 api,但我不确定如何从我的 url 获取 _id

www.xyzabc.com/register.html?id:57c5dda12e63d15d2e4dea2c www.xyzabc.com/register.html?57c5dda12e63d15d2e4dea2c

任何格式的网址。

我的 api 是这样的:

$scope.fetchEmail = function (id) {

    $scope.id = "57c5dda12e63d15d2e4dea2c";
    console.log("logging routeparam");
    console.log($scope.id);
    UserServices.fetchEmail($scope.id, function (email) {

        console.log("insied fetch fn");
        console.log(email);
        $scope.user.email = email;

    });
}

如果 id 是硬编码的,上面的代码可以完美地完成所有事情。我不知道如何从 url 中获取 url 参数作为 id。

问题 2:一旦我在 $scope.user.email = email; 中获得了我的 ID,它应该被填充到禁止用户编辑的字段中。

我尝试了下面的代码,但它对我不起作用。

<input name="email" id="email" class="form-control" placeholder="Email" ng-model={{"user.email"}} disabled="disabled" required>

任何人都可以帮助我解决这个问题。在此先感谢。

【问题讨论】:

    标签: angularjs node.js ngroute routeparams


    【解决方案1】:

    您应该使用 URL 路由在 Angular url 中传递变量。我相信您希望每个 id 都有一个唯一的 url,对吧?

    $stateProvider
        .state('contacts.detail', {
            url: "/contacts/:contactId",
            templateUrl: 'contacts.detail.html',
            controller: function ($stateParams) {
                // If we got here from a url of /contacts/42
                expect($stateParams).toBe({contactId: "42"});
            }
        })
    

    来源:https://github.com/angular-ui/ui-router/wiki/url-routing#url-parameters

    HTML 的简单格式如下。

    <input name="email" id="email" class="form-control" placeholder="Email" ng-model="user.email" ng-disabled="true" required>
    

    【讨论】:

      【解决方案2】:

      如果您的 url 有 ?id=57c5dda12e63d15d2e4dea2c 之类的参数,那么您可以使用 $location.search(url) 它将返回一个类似 {'id':'57c5dda12e63d15d2e4dea2c'} 的对象,然后您可以将其传递给 api 以获取邮件。

      【讨论】:

        猜你喜欢
        • 2012-09-24
        • 1970-01-01
        • 2011-04-20
        • 1970-01-01
        • 1970-01-01
        • 2016-04-28
        • 1970-01-01
        • 2015-08-12
        • 2016-04-03
        相关资源
        最近更新 更多