Question

我正在使用角度j进行测验。测验的第一页要求您输入您的名字，如果没有提供输入，则不允许您进一步。我想更像动画输入字段的动画在此网站（http://daneden.github.io/animate.css/）上，如果输入字段为空并且用户按下开始按钮。请帮助我。

CODE html：

            <p>What's your name?</p>
            <input type = "text" class = "playername" ng-model = "playername">
            <h2>Welcome {{playername}}!</h2>
            <p>Click start if you're ready!</p>
            <p class = "btn" ng-click = "startQuiz()">START</p>

CODE angular：

 $scope.presentQues = -1;
    $scope.startQuiz = function(){
        if ($scope.playername != null){
            $scope.presentQues = 0;
        }
    }

PS。这不是完整的代码。

Answer 1

在@Chris的答案的基础上，如果你把它包装在表格中，你也可以使用表格。$ submitted变量来检查表格是否已经提交。

ng-class使用以下格式：ng-class={'css-class':truthy-condition-to-evaluate

尝试以下代码（如果您已将所有内容包装在表单中，则必须更改此代码）：

<div ng-controller="myCtrl as ctrl">
      <form name="myForm">
        <p>What's your name?</p>
        <input type = "text" name="playername" class = "playername" ng-class="{'animated shake': !ctrl.playername && myForm.$submitted}" ng-model = "ctrl.playername">
        <h2>Welcome {{ctrl.playername}}!</h2>
        <p>Click start if you're ready!</p>
        <input type="submit" class = "btn" ng-click = "startQuiz()" value="START">
      </form>
    </div>

现在，如果玩家在没有输入任何内容的情况下提交表单，则angular会将animated和shake css类应用于文本输入。

Look at my plunker要查看它的实际效果。

如果没有提供输入，则更改CSS属性（Angular JS）

1 个答案: