How to stream change input text in Angularjs?

A

andreyka_g2015-03-11 14:05:35

JavaScript

andreyka_g, 2015-03-11 14:05:35

Hello! My task is to implement text encryption. That is, in one field I enter the text to be encrypted, and in the second field, after pressing the button, the encrypted text is displayed. But this is not entirely interesting, and I decided to embellish this business with "real-time" encryption. It is necessary that I enter only one character in the first field and immediately display the cipher of this character in another. I know that there are things like ng-model and ng-bind in Angular, maybe I need to write some function for processing ng-bind?:
<textarea ng-bind="model.crypt()"></textarea>
I'm completely new to Angular, so I hope for understanding. Thank you for your attention.

Reply

Answer the question

In order to leave comments, you need to log in

6 answer(s)

M

Mikhail Goryachkin, 2015-03-11
@abaddon65

Well, here's how you can do it:

<html ng-app="App">
  <body ng-controller="baseController">
    <textarea name="notCrypt" ng-model="noCript"></textarea>
    <textarea name="crypt">{{noCript|cript}}</textarea>
  </body>
</html>

JS:

var app = angular.module("App", []).
controller("baseController",['$scope', function ($scope) {
  $scope.noCrypt = "";
}]).
filter('cript', function () {
  return function(input) {
    // и вот тут, перед выводом, вы можете делать с вашим кодом все что вы захотите в том числе и кодировать
    return input;
  }  
});

A

Alexey, 2015-03-11
@Assada

Well, for example, you can write your own filter. This is simpler than a directive but not quite true.

H

Hazrat Hajikerimov, 2015-03-11
@hazratgs

There is an interesting solution from Zurb , but it comes with jQuery

S

Sergey Melnikov, 2015-03-11
@mlnkv

Why use a framework where you can handle a couple of lines of native js???

<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha1.js"></script>

<input type="text" id="in">
<input type="text" id="out">

function handler() {
    document.querySelector('#out').value = CryptoJS.SHA1(this.value);
}
var input = document.querySelector('#in');
input.addEventListener('keyup', handler);
input.addEventListener('change', handler);

jsfiddle.net/gzwaqojc

L

lega, 2015-03-11
@lega

Variant on Angular Light

D

Dmitry Vapelnik, 2015-03-11
@dvapelnik

Here is an example of a solution to your question. I wrote something similar literally in an hour after some acquaintance with Angialr. yes i used the filter
https://github.com/dvapelnik/markdown-on-the-knees