javascript - 如何在 AngularJS 中禁用表单？

Question

我是 AngularJS 新手。所以，我有一个我创建的表单和按钮。但是，由于某种原因，我的表单没有被禁用。我想做的就是当用户来到该页面时，我希望禁用该表单。谢谢。

Here is my code.

  <a class="back" href="#/user">Back</a>

  <button type="button" class="edit" ng-show="inactive" ng-click="inactive = !inactive">
    Edit
  </button>

  <button type="submit" class="submit" ng-show="!inactive" ng-click="inactive = !inactive">Save</button>



  <div class="people-view">

    <h2 class="name">{{audience.firstName}}</h2>

    <h2 class="name">{{audience.lastName}}</h2>

    <span class="title">{{audience.email}}</span>

    <span class="date">{{audience.website}} </span>

  </div>

  <div class="list-view">

    <form>

      <fieldset ng-disabled="inactive">

        <legend>Basic Info</legend>

        <b>First Name:</b>

        <input type="text" ng-model="audience.firstName">
        <br>

        <b>Last Name:</b>

        <input type="text" ng-model="audience.lastName">
        <br>

        <b>Email:</b>

        <input type="email" ng-model="audience.email">

      </fieldset>

    </form>

  </div>

</div> 

JS

  app.controller('MainCtrl', function($scope) {


   $scope.inactive = true;

   }

Answer 1

这接近您要寻找的东西吗？

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<div ng-app="">
  Click here to disable all the form fields:<input type="checkbox" ng-model="all"><br>
  <br>
  <a class="back" href="#/user">Back</a>
  <button type="button" class="edit" ng-show="inactive" ng-click="inactive = !inactive"> Edit </button>
  <button type="submit" class="submit" ng-show="!inactive" ng-click="inactive = !inactive">Save</button>

  <div class="people-view">
    <h2 class="name"> {{audience.firstName}}</h2>
    <h2 class="name">{{audience.lastName}}</h2>
    <span class="title">{{audience.email}}</span>
    <span class="date">{{audience.website}} </span>
  </div>

  <div class="list-view">
    <form>
      <fieldset ng-disabled>
        <legend>Basic Info</legend>
        <b>First Name:</b>
        <input type="text" ng-model="audience.firstName" ng-disabled="all">
        <br>
        <b>Last Name:</b>
        <input type="text" ng-model="audience.lastName" ng-disabled="all">
        <br>
        <b>Email:</b>
        <input type="email" ng-model="audience.email" ng-disabled="all">
      </fieldset>
    </form>
  </div>
</div>

请看看这个 JSFiddle! https://jsfiddle.net/rickydam/fstkcs26/