Question

我的范围内有一个带有联系对象的控制器。

如果联系人有名字或姓氏，我想显示first-name＆lt; space＆gt; 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>

Answer 1

如果我正确理解您的问题，您可以使用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>

那是你在找什么？

Answer 2

这里有2个选项1创建一个函数，如果你有名字或姓氏或者验证到html，则返回true或false：

解决方案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>

这会有效，但正如你在代码中看到的那样，输入字段没有显示，所以你很可能需要一个后端函数。

Answer 3

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

可以通过多种方式实现这一目标。但是因为你想在表达式中实现它，所以只能在下面完成它。只需在表达式中使用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>

表达angularjs

3 个答案: