Question

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

Answer 1

<强> Live demo here (click).

如果您想要隐藏整个元素，可以简单地将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>

根据您的评论，您可能还希望通过功能返回绑定： Live demo (click).

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

使用AngularJS进行条件绑定，如果property不为空，则连接并绑定值

1 个答案: