All geek questions in one place

Angular - ng-disabled active / inactive

http://jsfiddle.net/zjqz6wjL/

I have 3 buttons, when you click on the button, they all become disabled.

It would be nice if only the button that I click turns off and the other two remain active. When you click on another button that turns off and in turn re-activates the previously disabled button back to the active state.

        <button ng-click="disableClick()" ng-disabled="isDisabled" ng-model="isDisabled">Disable ng-click 1</button>
+4
source share
4 answers

You can do it:

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;
        }
}]);

With this template:

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

See here: https://jsfiddle.net/dy7g0snx/

  • You don't need a directive ng-modelhere (it was unspecified, though).
  • Use your btns as objects
  • Get it as an array
  • Use the directive ng-repeatto loop on it
  • btn disableClick

, Joaozito Polo, , . , 2 3 , , .

$scope.disableClick(), .

angular js-side:

angular.module('ngToggle', []);

ng-click then 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.

+3

directives. : buttonGroup myButton. buttonGroup disabledBtnName . ng-repeat disabledBtnName. , , .

angular.module('ngToggle', [])
    .directive('buttonGroup', [function () {
    return {
        restrict: 'A',
        transclude: true,
        scope: {},
        template:
            '<div>' +
            '<button ng-repeat="btn in buttons" ng-disabled="btn.name == disabledBtnName" ng-click="disableMe(btn)" ng-bind="btn.text"></button>' +
            '<div ng-transclude></div>' +
            '</div>',
        controller: ['$scope', function ($scope) {
            $scope.buttons = [];
            this.addButton = function (btn) {
                $scope.buttons.push(btn);
            };
            $scope.disableMe = function (btn) {
                $scope.disabledBtnName = btn.name;
            };
        }]
    };
}])
    .directive('myButton', [function () {
    return {
        restrict: 'A',
        scope: {
            name: '@',
            text: '@'
        },
        require: '^buttonGroup',
        link: function (scope, iElement, attrs, btnGroupCtrl) {
            btnGroupCtrl.addButton(scope);
        }
    };
}]);

:

<body ng-app="ngToggle">
    <div button-group>
        <div my-button name="one" text="Button One"></div>
        <div my-button name="twp" text="Button Two"></div>
        <div my-button name="three" text="Button Three"></div>
    </div>
</body>

-: http://jsfiddle.net/zjqz6wjL/4/

+2

:

<body ng-app="ngToggle">
<div ng-controller="AppCtrl" ng-init = "disabled=0">
    <button ng-click = "disabled = disabled == 1 ? 0 : 1"  ng-disabled="disabled == 1" ng-model="isDisabled">Disable ng-click 1</button>
   <button ng-click="disabled = disabled=== 2 ? 0 : 2" ng-disabled="disabled == 2" ng-model="isDisabled">Disable ng-click 2</button>
   <button ng-click="disabled = disabled=== 3 ? 0 : 3" ng-disabled="disabled == 3" ng-model="isDisabled">Disable ng-click 3</button>
</div>

: http://jsfiddle.net/zjqz6wjL/8/

+2

ngDisabled:

<button ng-click="click(1)" ng-disabled="lastClicked == 1">Disable ng-click 1</button>

:

$scope.click = function(btn) {
    alert("Clicked!");
    $scope.lastClicked = btn;
    return false;
}

jsfiddle

+1

Source: https://habr.com/ru/post/1598056/

More articles:


All Articles