One specific scenario involves using a radio button for selecting options and requiring users to confirm their selection using the JavaScript confirm method before enabling the next button. Take a look at the following 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 );
}
}
});
After selecting a name, the next button gets enabled immediately regardless of the user's choice in the confirmation dialog. However, the issue arises when trying to evaluate multiple conditions for ng-disabled. If you have any suggestions or solutions, please let me know.
View the working code on Plunker