Clever Geek Handbook

I want to set multiple conditions in ng-disabled

<button type="button" class="btn-submit upload smooth-hover" data-prod-idx="{{index}}" data-prod-id="{{prod.ProductId}}"
ng-click="vm.onUpload($event, index, prod.ProductId)" 
ngf-select="vm.uploadAttachments($event, $files, $invalidFiles)" multiple accept="image/*,.pdf,*.doc,*.docx" ngf-capture="'camera'"
ngf-max-size="5MB" 
ng-disabled="prod.Product_Status === 'Approved||Not Approved'">
Upload Documents</button>
  • I have a different product status state depending on whether I want to disable the button. I have a problem or condition in ng-disable

    . This does not disable the button if I give conditions.

2.IF clicked on disabled button, it should display a warning message (not using JQuery) Each condition has a different msg error (Conditions in ng-disabled)

Thanks for the help!

+3


source to share


3 answers


Invalid condition code

ng-disabled="prod.Product_Status === 'Approved'|| prod.Product_Status === 'Not Approved'"


In case 2, you can remove ng-disable and by clicking the button you can do like this:

function onUpload($event, $files, prod.ProductId){
    if(prod.Product_Status === 'Approved'|| prod.Product_Status === 'Not Approved'){
        alert("Message")
        return;
    }
    // your code
}
+3


source


It should be:

ng-disabled="prod.Product_Status === 'Approved' || prod.Product_Status === 'Not Approved'"


Putting it ||

inside a string just makes it part of the string, not a logical operator.

+1


source


You had a wrong expression, it is basically being compared to Approved||Not Approved

as a string check. Better you can use the indexOf

valid statuses array to make your implementation more compact.

ng-disabled="prod.Product_Status === isDisabled(prod.Product_Status)"

code

//later you can add more status here in this array.
var validStatus = ['Approved', 'Not Approved']; 
$scope.isDisabled = function isDisabled(product_Status){
  return validStatus.indexOf(product_Status) > -1
}
0


source






More articles:


All Articles