angularjs - 如何在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> 

应用程序.js

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

Answer 1

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

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>

Answer 2

您可以在角度模板中添加 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;
   };
}]);