Question

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

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

http.createServer((req, res) => {
  let body = ''
  req.on('data', data => {
    body += data.toString()
  }).on('end', data => {
    if (data) body += data.toString()
    let boundary = req.headers['content-type'].split('boundary=')[1]

    // Split all the boundary items and loop over them
    body.split(new RegExp(`(--${boundary}|--${boundary}--)`)).forEach(item => {
      if (item.trim().toLowerCase().startsWith('content-disposition')) {
        item = item.trim()
        // Find the name and filename
        let result = item.split(':')[1].split(';').map(i => i.trim()).reduce((obj, itm) => {
          if (itm.startsWith('name=')) obj.name = itm.match(/^name="(.+)"/)[1]
          if (itm.startsWith('filename=')) obj.filename = itm.match(/^filename="(.+)"/)[1]
          return obj
        }, { name: '', filename: '' })

        // If there is a filename grab the file data
        if (result.filename.length > 0) {
          // Create a temporary url
          let temp = join(os.tmpdir(), (Math.random() * 10000).toString(12).substr(5, 10))

          // Get the data
          let matches = item.match(/^.+?(\r\n\r\n|\n\n)(.+)/s)

          // Write the data to file
          fs.createWriteStream(temp).write(matches[2])
        }
      }
    })
  })
})

此屏幕的控制器具有如下的drillExtDet函数，该函数将ID设置为作用域，然后激活详细信息屏幕：

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

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

屏幕2：具有一个输入表单，其中包含用于提取请求ID的字段和一个“查询”按钮：

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

此表格下面是显示所有详细信息的表格。如何填充输入字段，然后如何使表单自动提交？

已编辑以添加解决方案，这要归功于以下可接受的答案：

修改了屏幕1的drillExtDet函数，以将extractRequestId添加到$ location.path：

    <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添加了第二个条目：

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

在屏幕＃2控制器中，我添加了$ routeParams参数：

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并调用queryExtDet（）函数的代码，该函数将请求发送到服务器并填充新屏幕（与我的Submit函数相同）：

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

在输入表单方面，必须将输入字段从type =“ number”更改为type =“ text”，否则它将不起作用：

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

Answer 1

通过将extrReqId作为参数传递，您可以使用API访问先前的数据以获取这些详细信息，并使用ng-change和表单验证来自动提交数据。

Answer 2

我希望表格是可编辑的，并且多余的字段会出现在新屏幕中，如果不需要，则无需使用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>

AngularJS-如何设置在从其他表单进行的向下钻取中的文本输入？

2 个答案: