Угловые js для проверки поля ввода, чтобы убедиться, что он удовлетворяет условию после каждого действия onkeyup?

Так я новичок в угловых JS, и я понимаю немедленное преимущество возможности ввода и вывода вида, казалось бы, в реальном масштабе времени, как этот простой пример:Угловые js для проверки поля ввода, чтобы убедиться, что он удовлетворяет условию после каждого действия onkeyup?

<!DOCTYPE html> 
<html> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">  </script> 
<body> 
<div ng-app=""> 
<p>Name: <input type="text" ng-model="name"></p> 
<p>{{name}}</p> 
</div> 
</body> 
</html>

Но сейчас я хотел бы пойти один дальше и проверить, пользователь на любом этапе ввода говорит, номер 4., и если да, я хотел бы выпустить простое сообщение пользователю.

Я предполагаю, что это связано либо с ng-if, либо с ng-onkeyup, но документация об их реализации трудно понять, и я был бы очень признателен, если бы кто-то с опытом работы в этом поле мог вести меня в правильном направлении.

спасибо

источник

2015-08-10 Coder

Вы хотите проверить, имеет ли входное текстовое поле определенное значение или вы хотите проверить, набрал ли пользователь символ «4». Так что вам нужно предотвратить или предпринять какие-то действия? – Navaneet

Вам не нужна клавиатура здесь. Простой ng-if будет делать трюк для вас:

<div ng-app=""> 
    <p>Name: 
     <input type="text" ng-model="name"> 
    </p> 
    <p>{{name}}</p> 
     <div ng-if="name==4">You entered four. This is a relevant message to four</div> 
</div>

источник

2015-08-10 11:16:27

Веселитесь .. !!!

<!DOCTYPE html> 
 
<html> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">  </script> 
 
<body> 
 
<div ng-app=""> 
 
<p>Name: <input type="text" ng-model="name"></p> 
 
<p ng-show="name!='4'">{{name}}</p><span ng-show="name=='4'">You entered 4</span> 
 
</div> 
 
</body> 
 
</html>

источник

2015-08-10 11:16:12

Только в случае, если вы хотите, чтобы проверить формы это сделано красиво, используя нг-сообщений. Он не распространяется на ваш пример из коробки, но я все еще думаю, что это то, что вы ищете.

<form name="userForm"> 
    <div class="field"> 
    <label for="name">Enter name:</label> 
    <input 
    name="name" 
    ng-model="name" 
    ng-minlength="5" 
    /> 

    <div ng-messages="userForm.name.$error"> 
     <div ng-message="minlength"> 
     This is to short 
     </div> 

    </div> 
    </div> 

    <input type="submit" /> 
</form>

источник

2015-08-10 11:29:04

Другие ответы работают, но они дают вам очень конкретный прецедент.

В более широком смысле, вы можете использовать функцию

$scope.$watch

в контроллерах, чтобы сделать что-то «каждый раз, что изменения переменных».

В вашем примере, вы можете сделать что-то вроде this plunkr

Помните, что использование $ объем. $ Часы является довольно дорогостоящей операцией, так что вы должны использовать его только тогда, когда вы на самом деле необходима постоянная проверка на что-то

источник

2015-08-10 11:32:54 XelharK

Если вы ищете ответ, который более динамичен в реализации, я бы предложил использовать ng-change.

.html

<!DOCTYPE html> 
<html> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">  </script> 
<body> 
<div ng-app=""> 
<p>Name: <input type="text" ng-model="name" ng-change="isFour()"></p> 
<p>{{name}}</p> 
</div> 
</body> 
</html>

.js

//proper controller declaration 
$scope.isFour = function() { 
    //if you want to check that the complete input equals 4 
    if($scope.name == '4') { 
     //do something... 
    } 
    //if you want to check if the last character was 4 
    if($scope.name.slice(-1) == '4') { 
     //do something... 
    } 
    //if you want to check if it contains 4 or not 
    if($scope.name.indexOf("4") > -1) { 
     //do something... 
    } 
}

Примечание, что функция, заданная на ng-change выполняется при каждом изменении на поле ввода, поэтому его довольно дорого решение.

источник

2015-08-10 12:33:04

Угловые js для проверки поля ввода, чтобы убедиться, что он удовлетворяет условию после каждого действия onkeyup?

ответ

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