Question

此处，在一个表中，有多个记录，我想基于单选按钮的单击启用或禁用特定的表数据。例如：如果我单击“是”，则应启用该行表数据。其余所有都应禁用形式。（AngularJS）

任何人都可以请我帮忙。

<table style="background: ghostwhite;" class="table table-striped table-hover">

      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Product Name</th>
          <th scope="col">Variant Name</th>
          <th scope="col">Purchase Price</th>
          <th scope="col">Selling Price</th>

          <th scope="col">Offer ?</th>
          <th scope="col">Offer Details</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-show="AllItemDetails.length == 0"><td colspan="5" style="text-align:center;color: red;font-weight: bold;">No Details Found ..</td></tr>
            <tr dir-paginate="item in AllItemDetails|itemsPerPage:itemsPerPage |filter:search" total-items="total_count" current-page="pageno">
                <td>{{itemsPerPage * (pageno-1)+$index+1}}</td>
                <td>{{item.productName}}</td>
                <td>{{item.variantName}}</td>
                <td>{{item.purchasePrice}}</td>
                <td>
                    <div class="col-md-6">
                        <input type="text" ng-model="item.sellingPrice" class="form-control" placeholder="Enter Selling Price" only-digits required/>
                    </div>
                </td>

                <td>
                    <div class="col-md-6">
                            <label>
                                <input type="radio" name="isOffer{{itemsPerPage * (pageno-1)+$index+1}}" value="YES" ng-model="isOffer" ng-value="'YES'" ng-checked="(isOffer === 'YES')" ng-click="showDetails(itemsPerPage * (pageno-1)+$index+1)">YES
                            </label>
                            <label>
                                <input type="radio" name="isOffer{{itemsPerPage * (pageno-1)+$index+1}}" value="NO" ng-model="isOffer" ng-value="'NO'" ng-checked="(isOffer === 'NO')" ng-click="hideDetails(itemsPerPage * (pageno-1)+$index+1)">NO
                            </label>
                    </div>
                </td>

                <td>
                    <div id="offer{{itemsPerPage * (pageno-1)+$index+1}}">
                            <input ng-disabled="{{isOffer === 'NO'}}" type="text" placeholder="Offer Name"/>
                            <input ng-disabled="{{isOffer === 'NO'}}" type="text" placeholder="%"/>
                    </div>
                </td>

            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>
                    <input style="float: right;" type="button" class="btn btn-primary" value="Update Price" ng-click="updateSellingPrice(AllItemDetails)" ng-disabled="pricemanagement.$invalid"/>
                </td>
            </tr>
     </tbody>

    </table>

Answer 1

这里的问题是您要传递给ng-disabled指令的内容。 ng-disabled接受一个表达式并在当前范围内对其求值。因此，不需要对表达式进行插值（{{...}}。

您可以通过在将表达式传递给{{...}}指令时删除插值（ng-disabled）来解决问题

<div id="offer{{itemsPerPage * (pageno-1)+$index+1}}">
    <input ng-disabled="isOffer === 'NO'" type="text" placeholder="Offer Name"/>
    <input ng-disabled="isOffer === 'NO'" type="text" placeholder="%"/>
</div>

以下是参考文档：https://docs.angularjs.org/api/ng/directive/ngDisabled

如何基于单选按钮单击启用或禁用一个td值angularjs？

1 个答案: