How to urlencode angularjs ng-model realtime

Question

Recently I've started a new project and would like to do some angularjs magic. The problem is i'm not skilled enough in angularjs or javascript to know how I could do it. One requirement is that it has to be in realtime without reloading a page.

So let me start with my questions now. I've got a simple input field and a display section that instantly shows everything that I type in. However I want the display part to be modified on the fly.

<div id="form" class="form-wrap" ng-app="" />
  <form action="index.php" method="post" id="form" />
    <input type="text" name="url" id="url" value="" ng-model="name" />
    <input type="submit" name="form_submit" id="form_submit" value="GOTO" />
  </form>

  <a href="https://example.com/index.php?url={{name}}" target="_blank">https://example.com/index.php?url={{name}}</a>
</div>

I'm already doing a validation in javascript but I dont know if it needs to be done in javascript or somehow in de anguarjs code itself. Just to be sure my javascript validation code:

<script>
  $('<div class="loading"><span class="bounce1"></span><span class="bounce2"></span><span class="bounce3"></span></div>').hide().appendTo('.form-wrap');
  $('<div class="success"></div>').hide().appendTo('.form-wrap');
  $('#form').validate({

    rules: {
      url: { required: true, url: true }
    },
    messages: {
      url: {
        required: 'Address is requ!red',
        url: 'Address is not val!d (https://www.nu.nl)'
      }
    },
    errorElement: 'span',
    errorPlacement: function(error, element){
    error.appendTo(element.parent());
    },

  });
</script>

As you might guess by now I want the {{name}} value to be urlencoded realtime so that an url like: https://www.google.nl/?q=a b c will be changed to https://www.google.nl/?q=a%20b%20c However, how should I do this?

Thanks in advance!

Hello, you should check the top answer for this post: http://stackoverflow.com/questions/22841225/ngmodel-formatters-and-parsers. Basically, it looks like you have to use a ng model formatter in order to apply the encodeURIComponent function on the value of your input when this value is used somewhere in the view (in your case, in the href attribute). — Benoit, Sep 24 '16 at 09:51

score 0 · Answer 1 · answered Sep 24 '16 at 10:33

0

Hi you can call a function on ng-change to encode name into url format like below. I have create a function urlFormat which take name value and convert it to url format and push new variable urlname back.

<div id="form" class="form-wrap" ng-app="" />
  <form action="index.php" method="post" id="form" />
    <input type="text" name="url" id="url" value="" ng-model="name" ng-change="urlFormat(name)" />
    <input type="submit" name="form_submit" id="form_submit" value="GOTO" />
  </form>

  <a href="https://example.com/index.php?url={{urlname}}" target="_blank">https://example.com/index.php?url={{urlname}}</a>
</div>

And create that function inside your controller like

$scope.urlFormat = function (name) {
 $scope.urlname = encodeURI(name)
}

answered Sep 24 '16 at 10:33

Udit Rawat

674
8
22

You see ng-change documentation here https://docs.angularjs.org/api/ng/directive/ngChange – Udit Rawat Sep 24 '16 at 10:33
Thanks for pointing me in that direction. However this does not seem to work. Defined my-app and my-ctrl in html as well. `var app = angular.module('my-app', []); app.controller('my-ctrl', ["$scope", function($scope) { $scope.urlFormat = function (name) { $scope.urlname = encodeURI(name) }}]);` No error what so ever – RvdM Sep 24 '16 at 11:12
Here is working version i have created http://plnkr.co/edit/gXHWReQxNqzZdED9C2C4?p=preview Added 2 files app.js and index.html in this plnkr – Udit Rawat Sep 24 '16 at 11:38

How to urlencode angularjs ng-model realtime

1 Answers1