angularjs在ng-model中添加空格

时间:2017-07-10 09:18:23

标签: angularjs-directive angularjs-ng-model

我有LOG 在ng-model上,它连接两个字段并且工作正常,但我想使用angular在(ContactPerson)和(ContactPersonSurname)之间添加空格。我怎样才能做到这一点?

2 个答案:

答案 0 :(得分:0)

如果你在ng-model指令中提供表达式,你会收到[ngModel:nonassign]错误,在Angularjs documentation中他们明确指出

  

当绑定ngModel指令的表达式是一个不可赋值的表达式时,会发生此错误   始终确保可以将通过ngModel指令绑定的表达式分配给。

<强>解决方案:
创建一个新的$ scope变量,类似于 $scope.fullName = (ContactPerson)+ ' ' +(ContactPersonSurname);然后在你的html中使用它,如下所示。

&#13;
&#13;
angular.module('mainApp', [])
    .controller('mainCtrl', function ($scope) {
       $scope.name = "john";
      $scope.surName = "Doe";
      $scope.fullName = $scope.name + " " + $scope.surName;
    });
&#13;
<html ng-app="mainApp">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body ng-controller="mainCtrl">
  <input type="text" ng-model="fullName" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
</body>
</html>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您的输入字段是只读的。所以你可以使用expressins而不是绑定模型。

&#13;
&#13;
var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.ContactPerson = 'foo';
    $scope.ContactPersonSurname = 'bar';
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">

<div ng-controller="MyCtrl">
  <input name="Name" type="text" id="Name" class="step-input" readonly="readonly" value="{{ContactPerson}} {{ContactPersonSurname}}"  />
</div>
</div>
&#13;
&#13;
&#13;

希望这能解决您的问题。