如果值大于255,如何使用angluarJS禁用按钮？

Question

如果textarea包含超过255个字母,我想使用angularJS来禁用提交按钮.我通常不使用angularJS,所以我真的不知道怎么做.这就是我所拥有的:(HTML)

<tr>
    <td colspan="2" align="center">
        <textarea rows="5" cols="40" name="Messge" ng-model="message"></textarea>
    </td>
</tr>
<tr>
    <td align="center">Number of letters left: <span ng-bind="left()"></span>
    </td>
</tr>
<tr>
    <td align="center" colspan="2">
        <input type="submit" value="submit" ng-disabled="error" />
    </td>
</tr>

现在这里是javascript文件代码:

angular.module('myApp', []).controller('userCtrl', function ($scope) {
    $scope.messge = '';
    $scope.error = false;
    $scope.incomplete = false;

    $scope.$watch('messge', function () { $scope.test(); });

    $scope.test = function () {
        if ($scope.messge.length > 255) {
            $scope.error = true;
        } else {
            $scope.error = false;
        }
    };
});

第二档:

app.controller("myNoteCtrl", function ($scope) {
    $scope.message = "";
    $scope.left = function () { return 255 - $scope.message.length; };
});

第3档:

var app = angular.module("myNoteApp", []);

我在W3Schools中找到了这些代码,Altough我似乎无法禁用该按钮.任何人都可以帮助我吗？如果有一种更简单的方法可以将它们组合在1个文件中,那就太棒了.如果你仍然不明白我的意思,那就告诉我,并试着以更好的方式探索它. TL; DR:我想在textarea文本长度大于255时使按钮变为禁用状态.

Answer 1

您可以使用html中的angular expresions完成所有操作:

<tr>
    <td colspan="2" align="center">
        <textarea rows="5" cols="40" name="Messge" ng-model="message"></textarea>
    </td>
</tr>
<tr>
    <td align="center">Number of letters left: {{255 - message.length}}
    </td>
</tr>
<tr>
    <td align="center" colspan="2">
        <input type="submit" value="submit" ng-disabled="message.length > 255" />
    </td>
</tr>

请注意我是如何摆脱该left()功能并用角度表达式替换它.这意味着您实际上可以删除所有js文件(或至少与此相关的所有文件).