angularjs - ng-disabled 事件/非事件

标签 angularjs

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/

    相关文章:

    javascript - 如何检测焦点何时超出 Div?

    angularjs - 选中复选框 ng-change 第一次不会触发

    Angularjs $http缓存刷新

    javascript - Angular 方框布局

    angularjs - Angular 使用 $http 和 YQL

    javascript - Safari 中的默认函数参数值不起作用

    javascript - AngularJS:在子元素上应用 ngStyle

    javascript - AngularJS 将类添加到 <td> 中,该类由 ngRepeat 从数据库动态生成

    angularjs - 使用 ui-router,如果 .otherwise() 指向未找到的页面,如何设置起始页面?

    javascript - 如何动态设置 Angular JS 页面的标题?