angularjs在ng-model中添加空格
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angularjs在ng-model中添加空格相关的知识，希望对你有一定的参考价值。
我在ng-model上有这个<input name="Name" type="text" id="Name" class="step-input" placeholder="NAME*" readonly="readonly" ng-model="(ContactPerson)+(ContactPersonSurname)" />，它连接两个字段并且工作正常，但我想使用angular在（ContactPerson）和（ContactPersonSurname）之间添加空格。我怎样才能做到这一点？
如果你在ng-model指令中提供表达式，你会得到一个[ngModel:nonassign]错误，在Angularjs documentation中他们清楚地说明了
当ngModel指令绑定到的表达式是不可赋值的表达式时，会发生此错误。 始终确保可以将通过ngModel指令绑定的表达式分配给。
解：
创建一个新的$ scope变量
然后$scope.fullName = (ContactPerson)+ ' ' +(ContactPersonSurname);在你的html中使用它，如下所示。
angular.module('mainApp', [])
.controller('mainCtrl', function ($scope) {
$scope.name = "john";
$scope.surName = "Doe";
$scope.fullName = $scope.name + " " + $scope.surName;
});<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>您的输入字段是只读的。所以你可以使用expressins而不是绑定模型。
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.ContactPerson = 'foo';
$scope.ContactPersonSurname = 'bar';
}<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>以上是关于angularjs在ng-model中添加空格的主要内容，如果未能解决你的问题，请参考以下文章
AngularJs - SELECT 中的 ng-model
AngularJS - 选择的 ng-model 工作不正常