如何在数据绑定中使用ng-disabled

Question

I am trying to disabled the button when the binding data (level) is 1.

ng-disabled="$ctrl.disabled($ctrl.selected.item.level)" I tried this but doesn't work

index.html:

<button type="button" class="btn btn-sm btn-outline-secondary" ng-click="$ctrl.delete()" ng-disabled="$ctrl.disabled($ctrl.selected.item.level)">Delete</button>

index.ts:

disabled = (level) => {
        if (level === 1) {
            return false;
        } else {
            true;
        }
    }

Answer 1

you should return true to disable the button. ng-disabled will disable the button when the called function will return true. in your case you are returning false in case, level equals 1. Also, Make sure the data types match when you use === operator

disabled = (level) => {
    if (level === 1) {
        return true;//this should be true when the level is 1, you want to disable.
    } else {
        false;//this should be false, cause you want to enable.
    }
}

Answer 2

Your code

disabled = (level) => {
        if (level === 1) {
            return false;
        } else {
            true;
        }
    }

It should be true to work because if the expression is true, then the disabled attribute will be set on the element so your code becomes,

disabled = (level) => {
    if (level === 1) {
        return true;//change here true 
    } else {
        false;
    }
}

or

(level === 1) ? return true : false;

see this document of angularjs

Answer 3

I know there are a few answers out there, but I just wanted to show a simplified version:

ng-disabled="$ctrl.selected.item.level === 1"

Or if you need that disabled variable for anything else, just use this:

disabled = (level) => { return level === 1;}