gpt4 book ai didi

angularjs - ng-disabled 事件/非事件

转载 作者:行者123 更新时间:2023-12-04 23:19:33 24 4
gpt4 key购买 nike

http://jsfiddle.net/zjqz6wjL/

我有 3 个按钮,当您单击一个按钮时,它们都会被禁用。

如果只有我单击的按钮被禁用而其他两个保持事件状态,那就太好了。单击另一个按钮时,该按钮将被禁用,然后将先前禁用的按钮重新激活回事件状态。

        <button ng-click="disableClick()" ng-disabled="isDisabled" ng-model="isDisabled">Disable ng-click 1</button>

最佳答案

你可以这样做 :

angular.module('ngToggle', [])
.controller('AppCtrl',['$scope', function($scope){
$scope.btns = [
{name:'1',isDisabled:false},
{name:'2',isDisabled:false},
{name:'3',isDisabled:false}
];
$scope.disableClick = function(btn) {
alert("Clicked!");
angular.forEach($scope.btns,function(_btn){
_btn.isDisabled = false;
});
btn.isDisabled = true;
return false;
}
}]);

使用此模板:
<body ng-app="ngToggle">
<div ng-controller="AppCtrl">
<button ng-repeat="btn in btns" ng-click="disableClick(btn)" ng-disabled="btn.isDisabled">Disable ng-click {{btn.name}}</button>
</div>
</body>

见这里: https://jsfiddle.net/dy7g0snx/
  • 您不需要 ng-model这里的指令(虽然它没有被取消)。
  • 使用你的 btns 作为对象
  • 将其作为数组
  • 使用ng-repeat循环指令
  • disableClick 中传递 btn 对象方法
  • 禁用方法
  • 中的所有按钮
  • 然后启用传递的按钮

  • 编辑

    受到评论的启发,然后是 Joaozito Polo 的答案,如果您不想使用对象,这里是另一种选择。在大多数情况下不建议这样做,但对于只有 2 或 3 个按钮的用例,非参数,这是可以接受的。

    在这种情况下,您不需要 $scope.disableClick()因此,也不再需要 Controller 。

    只需声明您的 Angular 模块 js-side :
    angular.module('ngToggle', []);

    并使用 ng-click然后 ng-disable内容关联中的指令:
    <body ng-app="ngToggle">
    <button ng-click="disabled = 1" ng-disabled="disabled == 1">Disable ng-click 1</button>
    <button ng-click="disabled = 2" ng-disabled="disabled == 2">Disable ng-click 2</button>
    <button ng-click="disabled = 3" ng-disabled="disabled == 3">Disable ng-click 3</button>
    </body>

    请注意,我删除了 ng-controller指令也是,因为它现在不会定义 js 端。

    demo here

    关于angularjs - ng-disabled 事件/非事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31434307/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com