使用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>
m59

现场演示在这里(单击)。

如果要隐藏整个元素,则可以简单地将ng-showorng-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;
};

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用AngularJS进行条件绑定,如果属性不为空,则连接并绑定值

来自分类Dev

数据绑定:如果不为null,则设置属性

来自分类Dev

使用MVVMCross进行属性的条件绑定

来自分类Dev

使用MVVMCross条件绑定属性

来自分类Dev

如果从左连接表中的值不为空,则获取计数

来自分类Dev

绑定Angularjs选择项目以使用item的属性进行建模

来自分类Dev

如何对Visibility属性进行简单的XAML(WPF)条件绑定

来自分类Dev

如果变量不为 NULL,则 SQL 条件连接

来自分类Dev

LESScss如果变量不为空时的条件

来自分类Dev

LESScss如果变量不为空时的条件

来自分类Dev

如果不为空,则显示在angularJS中隐藏

来自分类Dev

使用指令绑定属性

来自分类Dev

使用指令绑定属性

来自分类Dev

AngularJS绑定到Typescript属性

来自分类Dev

在angularjs中绑定HTML属性

来自分类Dev

AngularJS绑定到Typescript属性

来自分类Dev

如果参数不为空则返回值

来自分类Dev

使用值作为值语法时,AngularJS选择不绑定

来自分类Dev

使用淘汰赛进行条件“点击”绑定

来自分类Dev

使用预期条件时未定义的属性“绑定”

来自分类Dev

对mat-header-cell使用条件属性绑定

来自分类Dev

使用AngularJs在JSON帖子上进行Servicestack +模型绑定

来自分类Dev

使用Ember.js进行部分静态属性绑定?

来自分类Dev

使用字符串与属性名称进行角度绑定

来自分类Dev

使用字符串与属性名称进行角度绑定

来自分类Dev

使用Bootstrap工具提示进行指令属性绑定

来自分类Dev

Spring Web Flow空白绑定应为null,而不为空String

来自分类Dev

使用AngularJS在HTML中设置双向绑定指令属性

来自分类Dev

如何连接文本绑定中使用的可观察值?

Related 相关文章

热门标签

归档