angular js在报错后信息清楚重新输入

Question

angular js，如图，如何使光标在报错后还能保持在输入框里，并且红框部分会清除，能够重新扫入信息，求各位提供思路

Answer 1

引自强大而免费的微信小程序：皆我百晓生。

要实现在报错后能够保持光标在输入框中，并清除红框部分以便重新输入信息，可以尝试以下几个步骤：

1. 监听错误事件：在AngularJS中，可以使用$watch来监听输入框的值，并处理错误事件。当发生错误时，可以存储错误信息并将错误状态标记为true。

2. 清除错误状态和标记：在重新输入之前，需要重置错误状态和标记。可以在重新输入数据之后或者在输入框获取焦点的时候重置错误状态，并将错误信息清空。

3. 设置输入框焦点：在报错后保持光标在输入框中，可以使用ng-focus指令或者JavaScript的focus方法。当发生错误时，可以使用这些方法将焦点设置到输入框上。

4. 清除红框部分：要清除红框部分，可以使用CSS的伪类选择器:invalid来添加样式，或者使用JavaScript在错误状态下添加或移除CSS类。

以下是示例代码：

在Controller中：

app.controller('myCtrl', function($scope) {
  $scope.barcode = ''; // 输入框的值
  $scope.error = false; // 错误状态
  
  // 监听输入框的值
  $scope.$watch('barcode', function(newVal) {
    // 检查输入框的值是否为空或者其他错误条件
    if (newVal === '') {
      $scope.error = true;
      // 存储错误信息
      $scope.errorMessage = '请输入条形码序号';
    } else {
      $scope.error = false;
      $scope.errorMessage = '';
    }
  });
  
  // 输入框获取焦点时清除错误状态和标记
  $scope.clearError = function() {
    $scope.error = false;
    $scope.errorMessage = '';
  };
});

在模板中：

<div ng-controller="myCtrl">
  <label for="barcodeInput">条形码序号：</label>
  <input id="barcodeInput" type="text" ng-model="barcode" ng-focus="clearError()">
  <table>
    <tr>
      <th></th>
      <th>成品序号</th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>不良现象</th>
    </tr>
    <tr>
      <td>x</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>
        <select ng-disabled="error">
          <option value="">请选择</option>
          <!-- 下拉选框的选项 -->
        </select>
      </td>
    </tr>
  </table>
  
  <div ng-if="error" style="color: red;">{{ errorMessage }}</div>
</div>

这样，在输入框为空或者发生其他错误时，会显示错误信息并清除红框部分。同时，光标会保持在输入框中，以便重新扫入信息。输入框获取焦点时，错误信息和状态也会被清除。