Javascript 如何使用angularJS仅在按钮上显示输入字段？

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

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

这是我的密码

<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中放置edit，以仅在单击edit时显示，但它不起作用

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

{{edit？'close'：'edit'}

您可以像这样尝试

<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>

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

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

你可以试一下

<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>

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

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

---

您需要将函数附加到

ng click

调用，如下所示：

ng click=“enable（）”

。函数

enable（）

可以将编辑变量更改为true，并显示字段

---

或者，如果您不想使用函数，可以直接使用：

ng click=“edit=！edit”

您需要将函数附加到

ng click

调用，如下所示：

ng click=“enable（）”

。函数

enable（）

可以将编辑变量更改为true，并显示字段

或者，如果您不想使用某个函数，可以直接使用：

ng click=“edit=！edit”

ng click=“edit=true”

ng click=“edit=true”