Задать вопрос
andreyka_g
@andreyka_g

Как сделать потоковое изменение введенного текста на Angularjs?

Здравствуйте! Передо мной стоит задача реализовать шифрование текста. То есть, в одно поле я ввожу текст, который нужно зашифровать, а во втором поле, после нажатия кнопки, выводится зашифрованный текст. Но так не совсем интересно и я решил приукрасить это дело шифрованием "в режиме реального времени". Нужно чтобы я ввел только один символ в первое поле и тут же вывелся шифр этого символа в другом. Я знаю, что на ангуляре есть такие вещи как ng-model и ng-bind, возможно нужно написать какую-то функцию на обработку ng-bind?:
<textarea ng-bind="model.crypt()"></textarea>
Я в ангуляре совсем новичок, поэтом надеюсь на понимание. Спасибо за внимание.
  • Вопрос задан
  • 2450 просмотров
Подписаться 1 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 6
Ну вот как-то так можно:
<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;
  }  
});
Ответ написан
Комментировать
Ну, например, можно написать свой фильтр. Это проще чем директива но не совсем true.
Ответ написан
Есть интересное решение от Zurb, но он идет с jQuery
Ответ написан
mlnkv
@mlnkv
JavaScript Developer
Зачем использовать фреймворк там, где можно справиться парой строчек нативного 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
Ответ написан
@lega
Вариант на Angular Light
Ответ написан
Комментировать
вот пример решения Вашего вопроса. что-то подобное я запилил буквально за час после некоторого знакомства с ангялром. да, я использовал фильтр
https://github.com/dvapelnik/markdown-on-the-knees
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы