Условное связывание с AngularJS, конкатенация и привязка, если свойство не пустое

Я новичок в Angular и пытаюсь привязать строку к модели, если значение! == пустое. Эта работа для одного ввода, но я хотел бы объединить несколько текстовых входов в одну строку.

<input type="text" ng-model="data.source">
<input type="text" ng-model="data.medium">     

<span ng-show="data.source"><h3>{{'additionToSource' + data.source}}</h3></span>
<span ng-show="data.medium"><h3>{{'additionToMedium' + data.medium}}</h3>

Ответ 1

Живая демонстрация здесь (нажмите).

Вы можете просто добавить директиву ng-show или ng-hide к самому h3, если вы хотите скрыть весь элемент.

В качестве альтернативы вы можете использовать тройку в привязке, чтобы определить, что связано:

{{foo ? 'some string '+foo : ''}}

Пояснение:

foo //if $scope.foo is truthy (not empty)
? 'some string '+foo //bind a string with $scope.foo concatenated to the end
: '' //otherwise, bind in an empty string

Для вашего кода это будет:

<h3>{{data.source ? 'additionToString' + data.source : ''}}</h3>

На основе ваших комментариев вы также можете искать привязку с помощью функции: Живая демонстрация (нажмите).

<input ng-model="foo">

<h3 ng-show="foo">{{bar()}}</h3>
<h3>{{foo ? bar() : ''}}</h3>

JavaScript:

$scope.foo = '';
$scope.bar = function() {
  return 'added value '+$scope.foo;
};