javascript - 基于两种不同形式的NG禁用按钮

Question

在处理一个项目时，我遇到了一个问题，只要 2 个不同的表(其中的行有 ng-repeat，每行都有所需的输入)为空，我就需要禁用一个按钮田野依旧。所以基本上:

<table class="table table-striped fontsize12">
<thead>
    <tr>
        <th class="width-desc-auto">Description</th>
        <th class="width-reg-auto">Value</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="item in items">
        <td><h6>{{item.DESCRIPTION}}</h6></td>
        <td>
            <input type="text" class="form-control" ng-model="item.VALUE" 
                   placeholder="{{item.VALUE}}" disabled="true" required
            >
        </td>
    </tr>
</tbody>

还有:

    <table class="table table-striped fontsize12">
<thead>
    <tr>
        <th class="width-desc-auto">Description</th>
        <th class="width-reg-auto">Value</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="char in chars">
        <td><h6>{{char.DESCRIPTION}}</h6></td>
        <td>
            <input type="text" class="form-control"
              ng-model="char.VALUE" placeholder="Register Value" required
            >
        </td>
    </tr>
</tbody>

第一个是自动填写的，但在某些情况下仍然可能为空，第二个必须手动输入。我重复的实际数组并不重要。 现在，我通过在两个表格周围放置一个表单标签并将按钮包含在该表单标签中来解决这个问题。:

<form name="myForm">
     <table>...</table>
     <table>...</table>
     <span class="pull-right">
         <button class="btn btn-sm btn-primary" type="button" ng-disabled="myForm.$invalid">
           Close
         </button>
     </span>
</form>

这可行，但是如果我需要将两个表以不同的形式放入怎么办？例如autoForm和manualForm？我是否还需要将实际按钮放入表单标签中？因为如果我把它放在外面它似乎不起作用。

如果之前有人问过这个问题但我找不到它，我深表歉意。 提前。

Answer 1

只要表在同一范围内，您实际上不需要表单标记。您只需检查 ng-disabled 指令中两个输入字段的值并相应地禁用它 例如在这里你可以使用

<button class="btn btn-sm btn-primary" type="button" 
        ng-disabled="!(item.value && char.value)"
>
  Close
</button>

在这种情况下，按钮仅在两种输入类型都填写时才会启用