Я думаю, что метод AngularJS?

Я пытаюсь спорить с AngularJS и хотел бы знать, является ли код, который я поставил ниже, встроенным способом 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>

Оцените свой отзыв заранее.

источник

2013-12-09 karthiks

Возможно, вы ищете обзор кода? (http://codereview.stackexchange.com/) –

Вы также можете проверить документацию проверки формы, в частности раздел [Пользовательские проверки] (http://docs.angularjs.org/guide/forms#custom-validation) –

Этот вопрос не соответствует теме, потому что он принадлежит codereview.stackexchange.com – Stewie

Выглядит просто отлично для меня, пара указателей.

Я бы превратил validateUsername();resetRequired() в один метод в области, уменьшив беспорядок в вашем HTML.

Тройная ? true : false является излишним, просто использовать логическое выражение, которое вы имели в первую очередь:

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

_{(обратите внимание, что == 0 является falsy, так что вы можете просто проверить на truthy значение длины)}

Наконец, если бы это зависело от меня, я бы проверял с выражением часов, а не на событиях изменений. Это позволит очистить ваш код. Пример:

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

Результаты выражения 'username + password' не особенно важно, мы просто хотим, чтобы смотреть на огонь, если какой-либо из значений изменится. Тот факт, что вам не нужно будет активно добавлять проверку на все элементы DOM, которые могут изменить модель, а скорее сидеть сложа руки и позволить изменениям приходить к вам, гарантируют рефакторинг.

источник

2013-12-09 17:26:52 bevacqua

Большое спасибо за ваше время и конструктивную обратную связь. – karthiks

Каковы преимущества использования '$ scope. $ Watch' здесь, а не' ng-change' событий? PS: Я новичок в AngularJS – letiagoalves

тем фактом, что вам не нужно активно добавлять проверку ко всем элементам DOM, которые могут изменить модель, а скорее отложить назад и позволить изменениям прийти к вам. – bevacqua

Я думаю, что метод AngularJS?

ответ

Смежные вопросы