Question

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

这是我的代码。

  <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

为什么不使用原生的html属性？

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

或者您可以使用ng-disabled指令。

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

Answer 2

在fieldset中包装所有字段并使用ngDisabled指令，如下所示：

Nothing

它会自动禁用字段集内的所有输入。

然后在控制器中设置$ scope.inactive为true。

Answer 3

这接近你正在寻找的东西吗？

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

如何在AngularJS中禁用表单？

3 个答案: