如何对angularjs ng-model实时进行urlencode

Question

最近我开始了一个新项目，并想做一些 angularjs 魔术。问题是我在 angularjs 或 javascript 方面不够熟练，不知道我该怎么做。一个要求是它必须是实时的，无需重新加载页面。

所以让我现在开始我的问题。我有一个简单的输入字段和一个显示部分，可以立即显示我输入的所有内容。但是我希望动态修改显示部分。

<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>

我已经在 javascript 中进行验证，但我不知道它是否需要在 javascript 中完成，或者以某种方式在 de anguarjs 代码本身中完成。只是为了确定我的 javascript 验证代码：

<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>

正如你现在可能猜到的，我希望 {{name}} 值被实时 urlencoded 以便像 https://www.google.nl/?q=a b c 这样的 url 将更改为 https://www.google.nl/?q=a%20b%20c 但是，我该怎么做呢？

提前致谢！

Answer 1

您好，您可以在 ng-change 上调用一个函数，将名称编码为如下所示的 url 格式。 我创建了一个函数 urlFormat，它采用名称值并将其转换为 url 格式并将新变量 urlname 推回。

<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>

然后在你的控制器中创建这个函数，就像

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