有条件的用AngularJS结合，串联和绑定值，如果属性不为空 [英] Conditional binding with AngularJS, concatenate and bind value if property is not empty

问题描述

我是新来的角，我试图将一个字符串绑定到如果该值的典范！==空。这对于一个输入工作，但我想多个文本输入框组合成一个字符串。

 ＆LT;输入类型=文本NG模型=data.source＆GT;
＆LT;输入类型=文本NG模型=data.medium＆GT;＆LT;跨度NG秀=data.source＆GT;＆LT; H3＆GT; {{'additionToSource'+ data.source}}＆LT; / H3和GT;＆LT; / SPAN＆GT;
＆LT;跨度NG秀=data.medium＆GT;＆LT; H3＆GT; {{'additionToMedium'+ data.medium}}＆LT; / H3 GT＆;
 

解决方案

住在这里的演示（点击进入）。

您可以简单地添加 NG-节目或 NG-隐藏指令到 H3 本身，如果你想隐藏整个元素。

另外，你可以使用三元的结合，以确定哪些势必：

  {{富？ 一些字符串'+ foo的：''}}
 

说明：

  // foo的如果$ scope.foo是truthy（不为空）
？ 一些字符串+富//绑定$字符串scope.foo置到年底
：''在一个空字符串//否则，绑定
 

有关您的code，这将是：

 ＆LT; H3＆GT; {{data.source？ additionToString'+ data.source：''}}＆LT; / H3 GT＆;
 

根据您的意见

，你也可以寻找返回与函数的绑定： 现场演示（点击进入）。

 ＆LT;输入NG模型=foo的＆GT;＆LT; H3 NG秀=foo的＆GT; {{巴（）}}＆LT; / H3 GT＆;
＆LT; H3＆GT; {{富？巴（）''}}＆LT; / H3 GT＆;
 

JavaScript的：

  $ scope.foo ='';
$ scope.bar =功能（）{
  返回'增值'+ $ scope.foo;
};
 

I am new to Angular and am trying to bind a string to a model if the value !== empty. This work for one input, but I would like to combine multiple text inputs into one string.

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

解决方案

Live demo here (click).

You could simply add the ng-show or ng-hide directive to the h3 itself if you are wanting to hide the whole element.

Alternatively, you could use ternary in the binding to determine what is bound:

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

Explanation:

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

For your code, it would be:

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

Based on your comments, you may also be looking to return a binding with a function: 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结合，串联和绑定值，如果属性不为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！