Within my project, there are various tasks to be completed. If a user enters a todo item containing the substring clean, such as cleaning, clean, or cleaner, the input should be disabled.
To achieve this in my Angular controller, I have created a method that checks for the presence of the substrings and disables the input accordingly.
$scope.disableInput = function (todos) {
todos.forEach(function (item) {
if (item.toLowerCase().indexOf('clean') > -1) {
return true;
} else {
return false;
}
});
};
In my HTML file, I have included the ng-disabled attribute in the input field.
<form ng-submit="addTodo();">
<input type="text" ng-model="todoText" ng-disabled="disableInput(todos)">
<input type="submit" value="add">
</form>
Manually setting the value to true works, but the input does not respond to the return value of the disableInput method. I aim to dynamically check the todos object each time a new item is added and disable the input based on the substring.
How can I ensure that the true value returned by the disableInput method reflects back to the template, resulting in the input being disabled?
You can view the JSFiddle version here.
This example was inspired by this source, with the addition of the disable functionality.