combined properties in expression angularjs

Question

I have a controller with contact object in his scope.

If the contact has first name or last name, I want to show first-name<space>last-name.

My problem is that when the contact has no first name or last name. In this situation I want to show the user Create new contact but because there is a space between the first name and last name in the expression, it displays only the spacing.

Start typing in the inputs and you will that, basically, both of divs should show the same.

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>

Vipul Agarwal · Accepted Answer · 2015-09-03 09:23:25Z

1

You can use ng-if to fix your issue. I have updated the code to match your requirements. Hope this helps.

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>

There can be many ways this can be achieved. But since you want to achieve this in expressions only it can be done as below.. Just use the trim() in the expression.

Second solution:

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

edited Sep 3, 2015 at 9:23

answered Sep 3, 2015 at 8:29

Vipul Agarwal

1,6713 gold badges15 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mosh Feu Over a year ago

I already knew these solutions, I think there's a way to solve it by using expressions only.

Vipul Agarwal Over a year ago

Added a second solution to achieve the result using expressions only. Please note there may be different ways to achieve one thing.

muenchdo · Accepted Answer · 2015-09-03 08:22:47Z

1

If I understand your question correctly you can just use 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>

Is that what you were looking for?

edited Sep 3, 2015 at 8:22

answered Sep 3, 2015 at 8:16

muenchdo

2,1811 gold badge17 silver badges30 bronze badges

2 Comments

Claies Over a year ago

they actually want || not && in this case, but other than that, this is the correct approach. Although, using ||, they are going to get an empty space at the beginning of the string if they only have a LastName, probably still not optimal to do it this way; should have a property on the model that does the concat.

Mosh Feu Over a year ago

I already knew these solutions, I think there's a way to solve it by using expressions only.

Radu · Accepted Answer · 2015-09-03 09:11:19Z

1

You here have 2 options 1 create a function that return true or false if you have first or last name or do the verification into html:

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

This soution will invole to write the expresion form the verifyContacts function from above solution inline so your html will look like:

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

I personally prefer the first solution.

Edit: presenting the third solution:P

Solution 3: You can add a space at the end of the first name if the first name is available so you don't need to concat the strings with space

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>

this will work but as you can see in your code that the input fields are not displayed so you most probably will need a back-end function for that or something.

edited Sep 3, 2015 at 9:11

answered Sep 3, 2015 at 8:24

Radu

1,06612 silver badges37 bronze badges

2 Comments

Mosh Feu Over a year ago

I already knew these solutions, I think there's a way to solve it by using expressions only.

Radu Over a year ago

@MoshFeu please see the third solution this should do the trick :P

Collectives™ on Stack Overflow

combined properties in expression angularjs

3 Answers 3

2 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related