AngularJS - Как настроить ввод текста при детализации из другой формы?

Question

Я новичок в Angular.Я разработал одностраничное приложение с серией экранов с формами ввода, некоторые из которых необходимо «развернуть» до другого экрана и автоматически заполнить целевую форму ввода.

Экран № 1: После пользователязаполняет форму, он получает результаты в таблице.Каждая строка в таблице отображает запись с первой ячейкой, содержащей ссылку, которую пользователь может щелкнуть для получения дополнительной информации о ней, например:

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

Контроллер для этого экрана имеет функцию DrillExtDet следующим образом:устанавливает идентификатор в область, а затем активирует подробный экран:

$scope.drillExtDet = function(extractRequestId) {
    $scope.extrReqId = extractRequestId;
    $location.path('/queryExtDet');
}

Новый экран активирован, но есть две проблемы.Форма не заполняется, и затем я также хочу, чтобы форма автоматически отправлялась для получения подробностей.

Экран № 2: Имеет форму ввода с полем для идентификатора запроса на извлечение и кнопку «Запрос».:

    <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>

Ниже этой формы находится таблица, которая отображает все детали.Как заполнить поле ввода и как сделать так, чтобы форма автоматически отправлялась?

ИЗМЕНЕНО, чтобы добавить решение, благодаря принятому ответу ниже:

Функция Screen # 1 drillExtDetбыл изменен, чтобы добавить extractRequestId в $ location.path:

$scope.drillExtDet = function(extractRequestId) {
    $scope.extrReqId = extractRequestId;
    $location.path('/queryExtDet/' + extractRequestId);
}

Я добавил вторую запись для Screen # 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'
        })

В Screen #2 контроллер Я добавил аргумент $ routeParams:

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

Затем мой контроллер Screen 2 был модифицирован для включения кода для проверки $ routeParams и вызова функции queryExtDet (), которая отправляет запрос на сервер и заполняет новыйscreen (то же самое, что и моя функция submit):

$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.
    }
}

На стороне формы ввода поле ввода должно было быть изменено с 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>

Answer 1

я ожидал, что формы доступны для редактирования, и на новом экране присутствуют дополнительные поля, если их нет, тогда нет необходимости использовать ng-change, после получения сведений из api вы можете перенаправить функцию отправки, где вы можете проверить все деталиприсутствуют или нет.

$scope.submit=function(){
      if ($scope.userForm.$invalid) {
            alert($scope.userForm.$invalid);
             }else{}}

<form name="userForm" novalidate>
       <table><thead> <tr><th>Name</th> <th>Country</th></tr> </thead>
          <tbody>
             <tr data-ng-repeat="n in names | orderBy: 'Country'">
                <td> <input type="text" ng-model="n.name" name="uName" required="">
                    <div ng-show="userForm.$submitted && userForm.uName.$error.required">
                </td>
                <td>{{n.country}}</td>
             </tr>
          </tbody>
       </table>
    </form>

Answer 2

Передав extrReqId в качестве параметров, вы можете получить доступ к предыдущим данным с помощью API для получения этих данных, а с помощью ng-change и проверки формы вы можете автоматически отправлять данные.