Question

我正在尝试使用AngularJS，并且想知道我下面的代码是否与AngularJS的写作方式一致或者可以改进一些？

意图：隐藏重置按钮，并在用户输入用户名和密码输入框中的内容时显示。并在用户名验证失败时验证用户名和显示信息文本。

<!DOCTYPE html>
<html ng-app>
<head>
    <title>Playing with some ng-directives</title>
    <script src="angular.min.js"></script>
</head>
<body>
      <div ng-controller="LoginCtrl">
          <label>Username: </label>
          <input type="text" ng-model="username" ng-change="validateUsername();resetRequired()"/>
          <div ng-show="showUsernameInfo"> Username can only contain alphabets and numbers. Nothing else is allowed!</div>

          <label>Password: </label>
          <input type="password" ng-model="password" ng-change="resetRequired()"/>

          <input type="submit" value="Login" ng-hide="hideLoginButton"/>
          <input type="button" value="Reset" ng-hide="hideResetButton"/>
      </div>
</body>

<script language="JavaScript">
    function LoginCtrl($scope) {
        $scope.username = $scope.username || "";
        $scope.password = $scope.password || "";
        $scope.hideResetButton = true;

        $scope.validateUsername = function() {
            $scope.showUsernameInfo = (/([^0-9^a-z^A-Z])/).test($scope.username);
        };

        $scope.resetRequired = function() {
            if ( !angular.isUndefined($scope.username) && !angular.isUndefined($scope.password) ) {
                $scope.hideResetButton = ($scope.username.length==0 && $scope.password.length==0) ? true : false;
            }
        };
    }
</script>
</html>

提前感谢您的反馈。

Answer 1

看起来对我很好，有几个指针。

我会将validateUsername();resetRequired()转换为范围内的单个方法，从而减少HTML中的混乱。

三元? true : false是多余的，只需使用您首先使用的布尔表达式：

$scope.hideResetButton = !$scope.username.length && !$scope.password.length

_{（请注意，== 0是假的，所以你可以检查一个真实的长度值）}

最后，如果由我决定，我会使用监视表达式进行验证，而不是更改事件。这将进一步清理您的代码。例如：

$scope.$watch('username + password', function () {
    $scope.invalidateReset();
});

'username + password'表达式的结果并不是特别重要，我们只是希望在任何值发生变化时触发手表。事实上，您不需要主动添加对可能更改模型的所有DOM元素的检查，而是坐下来让变更给您，这需要重构。

我在想AngularJS的方式吗？

1 个答案: