angularjs在ng模型中添加空格

我在ng模型上有這<input name="Name" type="text" id="Name" class="step-input" placeholder="NAME*" readonly="readonly" ng-model="(ContactPerson)+(ContactPersonSurname)" /> ，它連接兩個字段並工作正常，但我想使用角度在（ContactPerson）和（ContactPersonSurname）之間添加空格。我怎樣才能做到這一點？angularjs在ng模型中添加空格

來源

2017-07-10 Fuluza

如果您提供NG-模型僞指令中的表達式，你會得到一個[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>

來源

2017-07-10 10:14:20 nivas

你輸入字段是隻讀的。所以你可以使用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>

希望這能解決你的問題。

來源

2017-12-19 12:15:51

angularjs在ng模型中添加空格

回答

相關問題