表达式angularjs中的组合属性

combined properties in expression angularjs

本文关键字：组合 属性 angularjs 表达式      更新时间：2023-09-26

我有一个控制器，在他的作用域中有contact object。

如果联系人有姓或名，我想显示first-name last-name .

我的问题是，当联系人没有名字或姓氏时。在这种情况下，我想显示用户Create new contact，但是因为表达式中的名字和姓氏之间有一个空格，所以它只显示空格。

开始输入，你会看到，基本上，两个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>

您可以使用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>

如果我正确理解你的问题，你可以使用ng-show/ng-hide:

<div data-ng-app="myApp" data-ng-controller="ctrl">
    <span ng-show="contact.FirstName && contact.LastName">
        {{contact.FirstName + ' ' + contact.LastName}}
    </span>
    <span ng-hide="contact.FirstName && contact.LastName">
        Create new contact
    </span>
</div>

这是你想要的吗?

你在这里有两个选择:1创建一个函数，如果你有名字或姓，返回true或false，或者在html:

中进行验证

解决方案1:

angular.module('myApp', []).
controller('ctrl', function($scope) {  
  $scope.contact = {};
  $scope.verifyContacts =  function(){
     return contact.FirstName || contact.LastName;
 }
});
<div data-ng-app="myApp" data-ng-controller="ctrl">    
  <span ng-hide="verifyContacts()">Create new contact</span>
  <span ng-show="verifyContacts()">{{contact.FirstName + ' ' + contact.LastName}}</span>
</div>

Soution 2:

这个解决方案将涉及从上面的解决方案内联编写verifyContacts函数的表达式，所以你的html将看起来像:

<div data-ng-app="myApp" data-ng-controller="ctrl">
 <span ng-hide="contact.FirstName || contact.LastName">Create new contact</span>
  <span ng-show="contact.FirstName || contact.LastName">{{contact.FirstName + ' ' + contact.LastName}}</span>
</div>

我个人更喜欢第一个解决方案。

编辑:呈现第三种解决方案:p

解决方案3:如果名字可用，可以在名字后面添加空格这样就不需要用空格

连接字符串了
angular.module('myApp', []).
    controller('ctrl', function($scope) {  
      $scope.contact = {};
      contact.FirstName = contact.FirstName ?  contact.FirstName + ' ' : contact.FirstName;
     }
    });
<div> {{contact.FirstName + contact.LastName || 'Create new contact'}} </div>

这将工作，但你可以在你的代码中看到，输入字段不显示，所以你很可能需要一个后端函数或什么

相关文章：