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

Question

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

这是我的代码：

<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-click="changeStatus()" 在你的角度模板中。

完整代码：

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>