编辑1

Question

我的HTML我在表格中有控件： -

<tr ng-repeat="r in MyTblDataList">
     <td>
       <input id="chkBoxClass" type="checkbox" class="checkbox checkbox-inline" ng-model="r.BoardID" />
     </td>
     <td>
        <input id="txtClass" type="text" class="form-control" ng-model="r.BoardName" value="{{r.BoardName}}" disabled />
     </td>
     <td>
        <input id="btnEditClass" type="button" class="btn-xs btn-info" value="Edit" ng-click="EditUpdateChange('btnEditClass','btnUpdateClass','txtClass',true)" />
        <input id="btnUpdateClass" type="button" class="btn-xs btn-success" value="{{btnUpdate}}" ng-click="UpdateClass('btnEditClass','btnUpdateClass','txtClass', r.BoardID )" hidden />
        <input id="btnDeleteClass" type="button" class="btn-xs btn-danger" value="Delete" />
      </td>

我正在使用我的功能来显示/隐藏和禁用文本框： -

$scope.EditUpdateChange = function (btnEditID, btnUpdateID, txtEditID, value) {
            if (value) {
                $('#' + btnEditID).hide();
                $('#' + btnUpdateID).show();
            }
            else {
                $('#' + btnEditID).show();
                $('#' + btnUpdateID).hide();
            }
            //$('#' + txtEditID).prop('disabled', !value);
            $(this).closest('tr').disabled = !value;
        }

即使我点击第二行或第三行的“编辑”按钮，我的问题仍然存在。我的第一行总是启用和禁用。无法弄清楚我做错了什么。还有一种更好的方法可以使用Angular吗？

Answer 1

为了隐藏和显示角度元素，我认为你应该使用内置指令ng-show，ng-hide或ng-if。

顾名思义，ng-show和ng-hide根据提供的表达式显示或隐藏元素。请注意，它们仍然在DOM中，它们现在还不可见。 ng-if在DOM中插入或删除元素，而不是显示或隐藏。

要禁用该行，您可以使用ng-disabled指令。

因此，在您的代码中，您可以使用：

<tr ng-disabled="!r.BoardID"> <!-- Didn't test, but I think this will disable the whole row, including the checkbox, so you may want to move the ng-disabled to the input itself -->
  <input id="btnEditClass" type="button" class="btn-xs btn-info" value="Edit" ng-click="EditUpdateChange()" ng-hide="r.BoardID" />
  <input id="btnUpdateClass" type="button" class="btn-xs btn-success" value="{{btnUpdate}}" ng-click="UpdateClass()" ng-show="r.BoardID" />
</tr>

总的来说，我认为在开发Angular应用程序时你并不需要使用JQuery。

编辑1

您想要的状态：

首先，编辑和删除按钮可用，文本框已禁用
点击编辑按钮时：
- 启用文本框
- 显示更新按钮
- 隐藏编辑按钮

好吧，所以代码就是这样：

以HTML格式排行

<tr ng-repeat="r in MyTblDataList">
  <td>
     <input id="chkBoxClass" type="checkbox" class="checkbox checkbox-inline" ng-model="r.BoardID" />
  </td>
  <td>
     <input ng-disabled="!r.isEditing" id="txtClass" type="text" class="form-control" ng-model="r.BoardName" value="{{r.BoardName}}"/>
     <!-- Will disable on null, false and undefined -->
 </td>
 <td>
    <input ng-click="onEdit($index)" ng-if="!r.isEditing" id="btnEditClass" type="button" class="btn-xs btn-info" value="Edit"/> 
    <!-- $index is a variable provided by ng-repeat -->
    <!-- Similar as above, but will be inserted in the DOM instead of disabled. -->

    <input ng-click="onUpdate($index)" ng-if="r.isEditing" id="btnUpdateClass" type="button" class="btn-xs btn-success" value="{{btnUpdate}}"/>

    <!-- 
      If you want to use show/hide, you would use:
        Edit btn: ng-hide="r.isEditing"
        Update btn: nh-show="r.isEditing"
    -->
    <input id="btnDeleteClass" type="button" class="btn-xs btn-danger" value="Delete" />
 </td>
</tr>

JS中需要的变量和函数

function onEdit(index){
  MyTblDataList[index].isEditing = true;
}

function onUpdate(index){
  // You may want to do something with the new data, maybe some validation or so
  MyTblDataList[index].isEditing = false;
}

更新控制器中的数据时，更改应反映在视图中。为了说明这一点，我创建了一个Plunker with your code。在这个plunker：

我使用vm as syntax（您可以搜索此内容，但通过var vm = this将数据链接到控制器而不是直接访问范围是更好的方法。
一次编辑一个字段
如果您在未单击“更新”按钮的情况下离开，则会放弃更改。

我选择使用ng-if代替ng-show和ng-hide来选择要显示的内容，因为当ng-if从HTML中移除内容时，它会移除观察者由Angular管理。请注意，如果观察者数量过多，则会影响性能。

如何启用/禁用表行内容 - Angularjs

1 个答案:

编辑1