javascript - 如何使用 AngularJS 确保客户端在文本区域中有足够的单词来禁用/启用按钮？

Question

我试图在客户输入一定数量的单词时启用按钮，但如果不满足字数要求则禁用该按钮。

我开始只是使用“if”“else”条件使用字符长度而不是单词，但无法获得所需的结果。我在文本区域元素中使用了“ng-model”，但每次刷新页面时，它总是在已输入的文本区域中显示“true”或“false”，并且当我删除它时，它总是启用该按钮。当我在文本区域中输入单个字符时，按钮将被禁用。

<span ng-controller="pract">
   <textarea id="blogVal" ng-model="btnChange" placeholder="Share"> 
   </textarea>
   <button ng-disabled="btnChange" class="btnpost">Post</button>
</span>

var app = angular.module("app", []);
app.controller("pract", ($scope) => {    
    $scope.clientValLength = document.getElementById("blogVal").value.length;
    if ($scope.clientValLength <= 7) {
        $scope.btnChange = true;
    } else {
        $scope.btnChange = false;
    }
});

Answer 1

您可能想查看ng-change。当值发生变化时，ng-change中使用的函数将被触发。您可以在那里进行检查。

从您的代码来看，您似乎正在将 $scope.btnChange 的值更改为 true 或 false。这将影响您的文本区域值。

使用普通 javascript 从 DOM 检索值并不是一个好习惯。所以尽量避免 document.getElementById("blogVal")

<textarea id="blogVal" ng-model="textAreaValue" ng-change="textChange()" placeholder="Share"></textarea>
<button ng-disabled="btnChange" class="btnpost">Post</button>

$scope.textChange(){
    if ($scope.textAreaValue.split(' ').length<= 7) {
        $scope.btnChange = true;
    } else {
        $scope.btnChange = false;
    }
}