如何在 AngularJS 中单击编辑按钮之前禁用输入文本？

Question

我已经创建了一个编辑按钮和一个表单。我无法禁用我的输入直到点击编辑按钮。
我只想禁用输入，当用户单击编辑按钮时，他们应该能够编辑文本。

Here is my code:

<div ng-controller="MyCtrl">
    <a class="edit" ng-click="inactive = !inactive">Edit</a>

    <form>
        <b>First Name:</b>
        <input type="text" ng-disabled="inactive" ng-model="input1" value="John">
        <br>
        <b>Last Name:</b>
        <input type="text" ng-disabled="inactive" value="Smith">
        <br>
        <b>Email:</b>
        <input type="email" ng-disabled="inactive" value="jsmith@email.com">
    </form>
</div>

App.js

function MyCtrl($scope) {
    $scope.inactive = false;
}

Answer 1

您可以添加 ng-点击="changeStatus()" 在你 angular 模板中。

完整代码：

var app = angular.module("Portal", ['ngRoute']);
app.controller('MyCtrl', ['$scope', function($scope) {
   $scope.inactive = true;
   $scope.changeStatus = function() {
      $scope.inactive = !$scope.inactive;
   };
}]);

Answer 2

要修复您的代码，您必须反转布尔变量：

function MyCtrl($scope) {
    $scope.inactive = true;
}

但要以更简洁的方式禁用整个表单输入，请将所有输入放入带有 ng-disabled 的字段集中，并从每个输入中删除 ng-disabled...

<form> 
    <fieldset ng-disabled="inactive">
        <b>First Name:</b>
        <input type="text" ng-model="name"><br>
        <b>Last Name:</b>
        <input type="text" ng-model="lastname"><br>
        <b>Email:</b>
        <input type="email" ng-model="email">
    </fieldset>
</form>

如何在 AngularJS 中单击编辑按钮之前禁用输入文本？

How to make input text disabled until edit button is clicked in AngularJS?

angularjs

angularjs-ng-disabled