如何使用 angularjs 确保客户端在 textarea 中有足够的单词以禁用/启用按钮？

Question

如果客户输入了一定数量的单词，我会尝试启用一个按钮，但如果他们的字数未达到，则禁用它。

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

<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。这会影响您的 textarea 值。

使用 vanilla 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;
    }
}