Question

我需要隐藏编辑的输入字段，直到单击按钮编辑然后我想显示输入字段。它必须在点击时切换以显示输入字段。

如果输入正在显示，我还想将编辑文本更改为关闭字段。

这是我的代码

<div class="personInfo">
          <h3>name <input type="text" ng-model="user.name" ng-show="edit"></h3>
          <h3>email: <input type="text" ng-model="user.email" ng-show="edit"></h3>
          <h3>birthday: <input type="text" ng-model="user.birthday" ng-show="edit"></h3>
          <h3>password: <input type="text" ng-model="user.password" placeholder="hidden" ng-show="edit"></h3>
          <button type="submit" class="save-button">Save</button>
          <button ng-click="edit">edit</button>
        </div>

ps：我试图在ng-click中进行编辑，仅在单击编辑但不能正常工作时显示

Answer 1

<button ng-click="edit = !edit">{{ edit ? 'close' : 'edit' }}</button>

Answer 2

您可以尝试

<div class="personInfo">
  <h3>name <input type="text" ng-model="user.name" ng-show="IsEditMode"></h3>
  <h3>email: <input type="text" ng-model="user.email" ng-show="IsEditMode"></h3>
  <h3>birthday: <input type="text" ng-model="user.birthday" ng-show="IsEditMode"></h3>
  <h3>password: <input type="text" ng-model="user.password" placeholder="hidden" ng-show="IsEditMode"></h3>
  <button type="submit" class="save-button">Save</button>
  <button ng-click="edit" ng-click="setMode(IsEditMode)">edit</button>
</div>

在您的控制器中，创建一个属性，如

$scope.IsEditMode = false;

然后为您的按钮创建一个ng-click，如

//toggle function
$scope.setMode = function(mode)
{
   if(mode == true)
        $scope.IsEditMode = false;
   else
        $scope.IsEditMode = true;
}

Answer 3

您需要在ng-click来电附加一项功能，例如：ng-click="enable()"。函数enable()可以将编辑变量更改为true，并显示字段。

或者，如果您不想使用某个功能，可以直接使用：ng-click="edit = !edit"

如何才能在带有angularJS的buttonclick上显示输入字段？

3 个答案: