Question

请参阅此Plunkr：http://plnkr.co/edit/YAQooPn0UERDI5UEoQ23?p=preview

输入文字为＆＃34; _______ ____ _____＆＃34; （不带引号＆amp; _代表空格。）

Angular正在从模型中移除空间（从正面和背面以及不在其间）（这是我想要的行为），但是我的文本框保留了空格。

如何从文本框中删除空格？即我希望文本框也反映出模型中的价值。

编辑：更好地解释我的需求。

对于Eg： 如果我输入＆＃34; ___ What_Ever ____＆＃34; （没有引用＆amp; _是空格），

1）我的文本框会显示我输入的内容，即＆＃34; ___ What_Ever ____＆＃34;

2）而我的模特会告诉我＆＃34;什么曾经＆＃34;。

我希望我的文本框的价值也是＆＃34;什么曾经＆＃34;。

HTML：

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery@1.9.0" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
    <script data-require="angular.js@1.0.7" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="MyCtrl">
    <input type="text" ng-model="modelVal">
    <br>
    model value is "{{modelVal}}"
  </body>

</html>

JS：

angular.module('app', [])
  .controller('MyCtrl', function($scope) {
    $scope.modelVal="";

  })

Answer 1

你可以这样做，

<body ng-controller="MyCtrl">
 <input type="text" ng-change="modelVal = modelVal.split(' ').join('')" ng-model="modelVal">
 <br>
  model value is "{{modelVal}}"
</body>

<强> DEMO

修改

您可以使用Angular本身提供的ngTrim

<input type="text" ng-trim="true" ng-model="modelVal"> <br> model value is "{{modelVal}}"

DEMO

Answer 2

这会有用吗？ - Plunker

ng-blur无法与您的Plunker一起使用，因为您加载的AngularJS版本（1.0.7）已经过时了。我用最新版本（1.5.6）替换它。我还使用ng-trim="false"来获取用户输入的正确文本。

标记

<body ng-controller="MyCtrl">
    <input type="text" ng-model="modelVal" ng-change="change()" ng-blur="blur()" ng-trim="false">
    <br>
    model value is "{{newModelVal}}"
</body>

JS

angular.module('app', [])
  .controller('MyCtrl', function($scope) {
    $scope.modelVal="";
    $scope.change = function () {
      $scope.newModelVal = $scope.modelVal;
    }
    $scope.blur = function () {
      $scope.modelVal = $scope.newModelVal.trim();
    }
  })

Angular js删除领先＆amp;来自输入文本框的尾随空格

2 个答案: