Question

我是Angular的新手，我想做一些非平凡的输入验证。

基本上我有一张桌子。每行包含三个文本输入。当用户键入任何文本输入时，我想检查该表是否包含至少一行包含三个非空白输入字段。如果有，我想显示一条消息。

我不知道如何在Angular中干净利落地完成任务，我们将非常感谢任何帮助。

这是我的HTML：

<tr data-ng-repeat="i in [1,2,3,4,5]">
  <td data-ng-repeat="i in [1,2,3]">
    <input ng-model="choice.selected" ng-change='checkAnswer(choice)' type="text" />
  </td>
</tr>
... 
<div ng-show="haveCompleteRow">we have a complete row!</div>

和控制器：

$scope.haveCompleteRow = false;
$scope.checkAnswer=function(choice){
  $scope.haveCompleteRow = true; // what to do here?
}

以下是一名说明问题的傻瓜：http://plnkr.co/edit/Ws3DxRPFuuJskt8EUqBB

Answer 1

说实话，我不会称之为表格验证。但对于初学者来说，如果你有一个真正的模型给观察者而不是模板中的数组，那将会简单得多。你开始的方式将会，或者至少可以引导你在控制器内进行dom操作，这对于角度来说是不可取的。

带有模型的简单第一个草图可以是：

app.controller('TestCtrl', ['$scope', function ($scope) {
  $scope.rows = [
    [{text: ''}, {text: ''}, {text: ''}],
    [{text: ''}, {text: ''}, {text: ''}],
    [{text: ''}, {text: ''}, {text: ''}]
  ];

  $scope.haveCompleteRow = false;

  // watch for changes in `rows` (deep, see last parameter `true`).
  $scope.$watch('rows', function (rows) {
    // and update `haveCompleteRow` accordingly
    $scope.haveCompleteRow = rows.some(function (col) {
      return col.every(function (cell) {
        return cell.text.length > 0;
      });
    });
  }, true);
}]);

使用：

<body ng-controller="TestCtrl">
  <table>
    <thead>
      <tr>
        <th>Col1</th>
        <th>Col2</th>
        <th>Col3</th>
      </tr>
    </thead>

    <tbody>
      <tr data-ng-repeat="row in rows">
        <td data-ng-repeat="cell in row">
          <input ng-model="cell.text" type="text" />
        </td>
      </tr>
    </tbody>
  </table>

  <div ng-show="haveCompleteRow">we have a complete row!</div>
</body>

作为模板。

演示：http://jsbin.com/URaconiX/2/

Angular新手：非平凡形式验证？

1 个答案: