防止 ng-click="" 对禁用按钮产生影响

2024-04-05

如何防止 AngularJS 不点击具有“禁用”属性的 HTML 按钮标签?

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<button type="button" disabled ng-click="something()">No Click Please!</button>

在这种情况下,不应该调用something()。


您传递的表达式必须在ngClick https://docs.angularjs.org/api/ng/directive/ngClick指示。如果评估结果不为 true 那么something()不会被调用。

这是一个例子:

(function() {

  angular.module('MyApp', [])
    .controller('MyController', MyController);

  MyController.$inject = ["$scope"];

  function MyController($scope) {

    $scope.disabled = true;

  }

})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div data-ng-app="MyApp">

  <div data-ng-controller="MyController">

    <button type="button" ng-disabled="disabled" ng-click="disabled || something()">No Click Please!</button>

    <button type="button" data-ng-click="disabled = !disabled">{{disabled ? 'Enable' : 'Disable'}}</button>

  </div>

</div>

请注意,您还可以使用ngDisabled https://docs.angularjs.org/api/ng/directive/ngDisabled指令,以便如果$scope.disabled是真的,something()不会被调用,按钮也将被禁用!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

防止 ng-click="" 对禁用按钮产生影响 的相关文章

随机推荐