javascript - 表达式 angularjs 中的组合属性

Question

我有一个 Controller ，其范围内有接触对象。

如果联系人有名字或姓氏，我想显示名字 姓氏。

我的问题是，当联系人没有名字或姓氏时。在这种情况下，我想向用户显示创建新联系人，但由于表达式中的名字和姓氏之间有空格，因此它仅显示空格。

开始输入输入内容，基本上，两个 div 应该显示相同的内容。

angular.module('myApp', []).
controller('ctrl', function($scope) {
  //$scope.contact = {
  //  FirstName: 'first',
  //  LastName: 'last'
  //}
  
  $scope.contact = {};
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div data-ng-app="myApp" data-ng-controller="ctrl">
  <input type="text" data-ng-model="contact.FirstName" placeholder="first name" />
  <input type="text" data-ng-model="contact.LastName" placeholder="last name" />
  <hr />
  <!-- If I add space between first and last name it will never show 'Create new conttact' -->
  {{contact.FirstName + ' ' + contact.LastName || 'Create new contact'}}<br />
  {{contact.FirstName + contact.LastName || 'Create new contact'}}
</div>

Answer 1

您可以使用 ng-if 来解决您的问题。我已经更新了代码以满足您的要求。希望这会有所帮助。

angular.module('myApp', []).
controller('ctrl', function($scope) {
  //$scope.contact = {
  //  FirstName: 'first',
  //  LastName: 'last'
  //}
  
  $scope.contact = {};
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div data-ng-app="myApp" data-ng-controller="ctrl">
  <input type="text" data-ng-model="contact.FirstName" placeholder="first name" />
  <input type="text" data-ng-model="contact.LastName" placeholder="last name" />
  <hr />
  <!-- If I add space between first and last name it will never show 'Create new conttact' -->
  {{contact.FirstName + ' ' + contact.LastName}}
<span ng-if="(contact.FirstName == null || contact.FirstName == '') && (contact.LastName == null || contact.LastName == '')">Create New Contact</span>

</div>

可以通过多种方式实现这一目标。但是，由于您想在表达式中实现此目的，因此只能按如下方式完成。只需在表达式中使用 trim() 即可。

第二个解决方案:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div data-ng-app="myApp" data-ng-controller="ctrl">
  <input type="text" data-ng-model="contact.FirstName" placeholder="first name" />
  <input type="text" data-ng-model="contact.LastName" placeholder="last name" />
  <hr />
  <!-- If I add space between first and last name it will never show 'Create new conttact' -->
  {{(contact.FirstName + ' ' + contact.LastName).trim() || 'Create New Contact'}}

</div>