Javascript AngularJS-如何设置从另一个窗体向下钻取的文本输入？

我是新手。我设计了一个单页应用程序，其中包含一系列带有输入表单的屏幕，其中一些需要“深入”到另一个屏幕并自动填充目标输入表单

屏幕#1：用户填写表单后，会在表格中得到结果。表中的每一行都显示一个条目，其中第一个单元格包含一个链接，用户可以单击该链接以获取有关该链接的更多详细信息，例如：

       <td><a ng-click="drillExtDet(e.extractRequestId)"> {{e.extractRequestId}}</a></td>

新屏幕已激活，但存在两个问题。表单未被填写，然后我还希望表单自动提交，以便检索详细信息

屏幕#2：有一个带有提取请求id字段和查询按钮的输入表单：

    <form class="navbar-form navbar-center">
        <div class="form-group">
            <p>Extract Request ID* </p>
            <input type="number" min="1" step="1" class="form-control" ng-model="extrReqId" ng-change="resetMessage()" style="width:100px">
            <button type="submit" class="form-control btn btn-primary"
                ng-click="queryExtDet()" style="width:100px">
                <i class="fa fa-shield">&nbsp;</i>Query
            </button>
        </div>
    </form>

我在路由提供程序表中为屏幕#2添加了第二个条目：

app.config(function($routeProvider) {
    $routeProvider
        .when('/queryExtDet', {
            templateUrl : 'app/queryExtDet.htm',
            controller : 'queryExtDetCtrl'
        })
        .when('/queryExtDet/:extrReqId', {  // with route param to support drill-down
            templateUrl : 'app/queryExtDet.htm',
            controller : 'queryExtDetCtrl'
        })

在屏幕#2 controller中，我添加了$routeParams参数：

app.controller('queryExtDetCtrl', ['$scope', '$http', '$routeParams', function($scope, $http, $routeParams) {

然后，我的Screen 2控制器被修改为包含检查$routeParams和调用queryExtDet（）函数的代码，该函数将请求发送到服务器并填充新屏幕（与我的submit函数所做的相同）：

在输入表单端，输入字段必须从type=“number”更改为type=“text”，否则将无法工作：

    <form class="navbar-form navbar-center">
        <div class="form-group">
            <p>Extract Request ID* </p>
            <input type="text" class="form-control" ng-model="extrReqId" placeholder="Extract Request Id" ng-change="resetMessage()" style="width:100px" required>
            <button type="submit" class="form-control btn btn-primary"
                ng-click="submit()" style="width:100px">
                <i class="fa fa-shield">&nbsp;</i>Query
            </button>
            <a href="/TCSCWebServices/rest/export/extDet;fmt=csv;extrReqId={{extrReqId}}"><i class="fa fa fa-retweet"></i> Export</a>
        </div>
    </form>

提取请求ID*

查询

通过将

extreqid

作为参数传递，您可以使用API访问以前的数据以获取这些详细信息，通过使用

ng change

和表单验证，您可以自动提交数据。

通过将

extreqid

作为参数传递，您可以使用API访问以前的数据以获取这些详细信息，通过使用

ng change

和表单验证，您可以自动提交数据。

我希望表单是可编辑的，并且在新屏幕中显示额外字段，如果没有，则无需使用ng change，从api获取详细信息后，您可以重定向到submit函数，在该函数中您可以检查是否存在所有详细信息

$scope.submit=function（）{
if（$scope.userForm.$invalid）{
警报（$scope.userForm.$invalid）；
}else{}

命名国家
{{n.country}

我希望表单是可编辑的，并且在新屏幕中有额外的字段，如果没有，则无需使用ng change，从api获取详细信息后，可以重定向到submit函数，在该函数中可以检查所有详细信息是否存在

$scope.submit=function（）{
if（$scope.userForm.$invalid）{
警报（$scope.userForm.$invalid）；
}else{}

命名国家
{{n.country}

对于SPA，您必须使用某种路由机制。如果您使用的是

ngRoute

，则可以将

extreqid

作为参数传递到Screen#2，并使用

$routeParams

检索相同的内容。对于SPA，您必须使用某种路由机制。如果您使用的是

ngRoute

，则可以将

extreqid

作为参数传递到Screen#2，并使用

$routeParams

检索相同的内容。感谢deepica-使用$routeParam，我现在可以填充输入字段了。但是我没有成功地自动提交表单。我尝试在输入字段上进行ng更改，但它似乎不会因为从route参数更改输入字段而导致调用任何内容（仅当用户在输入字段中键入时才会调用它）。您提到将ng change与表单验证结合使用，您能详细说明表单验证是如何适应的吗？实际上，我发现正在调用screen 2控制器，我只需通过编程方式调用submit函数。谢谢你的帮助！感谢deepica-使用$routeParam，我现在可以填充输入字段了。但是我没有成功地自动提交表单。我尝试在输入字段上进行ng更改，但它似乎不会因为从route参数更改输入字段而导致调用任何内容（仅当用户在输入字段中键入时才会调用它）。您提到将ng change与表单验证结合使用，您能详细说明表单验证是如何适应的吗？实际上，我发现正在调用screen 2控制器，我只需通过编程方式调用submit函数。谢谢你的帮助！

app.controller('queryExtDetCtrl', ['$scope', '$http', '$routeParams', function($scope, $http, $routeParams) {

$scope.extrReqId = $routeParams.extrReqId;
if ($scope.extrReqId !== undefined) {
    queryExtDet($scope.extrReqId);
}

$scope.submit = function() {
    //console.log("queryExtDetCtrl.submit() invoked with extrReqId="+$scope.extrReqId);
    if (!$scope.extrReqId) {
        $scope.message = "'Extract Request ID' is required!";
    } else {
        queryExtDet($scope.extrReqId);
    }
}

function queryExtDet(extractRequestId) {
    $scope.extrReqId = extractRequestId;
    if (!$scope.extrReqId) {
        $scope.message = "'Extract Request ID' is required!";
    } else {
        // $http.get etc.
    }
}

    <form class="navbar-form navbar-center">
        <div class="form-group">
            <p>Extract Request ID* </p>
            <input type="text" class="form-control" ng-model="extrReqId" placeholder="Extract Request Id" ng-change="resetMessage()" style="width:100px" required>
            <button type="submit" class="form-control btn btn-primary"
                ng-click="submit()" style="width:100px">
                <i class="fa fa-shield">&nbsp;</i>Query
            </button>
            <a href="/TCSCWebServices/rest/export/extDet;fmt=csv;extrReqId={{extrReqId}}"><i class="fa fa fa-retweet"></i> Export</a>
        </div>
    </form>