CODEWITHSUNDEEP
javascriptangularjs
Mayur Randive
Mayur Randive

Reputation: 643

ng-disabled is failing when put more than one expression

In one scenario I want to use a radio for selection of options and after selection explicitly i want the user to do the confirmation for which i have used confirm method of javascript. after confirmation for the selection only the next button should get enabled. have a look at below code

HTML

  <body ng-controller="MainCtrl">
  <div ng-repeat="person in names">

    <input class="d-radio__input" ng-model="$parent.selectedCustomer" type="radio" ng-value="person" value="{{person.name}}" name="radio" ng-click="confirm()" required /> {{person.name}}

  </div>
  <button>Back</button>
  <button ng-click="next()" ng-disabled="selectedCustomer =='' && confirmation == 0 ">Next</button>
</body>

Javascript

    app.controller('MainCtrl', function($scope) {
  $scope.selectedCustomer ='';
  $scope.confirmation=0;
  $scope.names = [{name:"Mayur"},{name:"Sameer"}];

                $scope.next = function () {
                    $scope.navigator =  $scope.navigator + 1 ;
                    console.log($scope.navigator)
                };
                $scope.confirm = function (location) {
                    var r = confirm("Click Ok to continue the offboarding process for (" + $scope.selectedCustomer.customerName + ")");
                    if (r === true) {
                        $scope.confirmation = 1;
                        console.log($scope.confirmation );
                    } else {
                        $scope.confirmation = 0;
                        console.log($scope.confirmation );
                    }
                }
});

So when i select a name immediately it is enabling the next button irrespective of what i press in the confirmation dialogue box. But when i keep only one conditional expression to evaluate for ng-disabled then it is working fine. Not sure how i can add more than one condition in ng-disabled.

Please let me know if I am doing something wrong.

have a look at Plunker

Upvotes: 0

Views: 107

Answers (2)

Stark Buttowski
Stark Buttowski

Reputation: 1849

Probably this is your requirement.

var app =angular.module('app' ,[])
app.controller('MainCtrl', function($scope) {
  $scope.selectedCustomer ='';
  $scope.confirmation=0;
  $scope.names = [{name:"Mayur"},{name:"Sameer"}];

                $scope.next = function () {
                    $scope.navigator =  $scope.navigator + 1 ;
                    console.log($scope.navigator)
                };
                $scope.confirm = function (location) {
                    var r = confirm("Click Ok to continue the offboarding process for (" + $scope.selectedCustomer.customerName + ")");
                    if (r === true) {
                        $scope.confirmation = 1;
                        console.log($scope.confirmation );
                    } else {
                        $scope.confirmation = 0;
                        console.log($scope.confirmation );
                    }
                }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app='app' ng-controller="MainCtrl">
  <div ng-repeat="person in names">

    <input class="d-radio__input" ng-model="$parent.selectedCustomer" type="radio" ng-value="person" value="{{person.name}}" name="radio" ng-click="confirm()" required /> {{person.name}}

  </div>
  <button>Back</button>
  <button ng-click="next()" ng-disabled="selectedCustomer =='' || confirmation == 0 ">Next</button>
</body>

Upvotes: 1

Daniel Dawes
Daniel Dawes

Reputation: 1005

As per the comment, because it is an ng-disabled, and you are using an AND (&&), it will only disable when both are true, use an OR instead (||), as per the plunk:

<button ng-click="next()" ng-disabled="selectedCustomer == '' || !confirmation ">Next</button>

http://plnkr.co/edit/pGTuuE9RyGz7WOKSnClG?p=preview

Upvotes: 1

Related Questions