如何将字符串绑定到视图中的范围 var?
How to bind a string to scope var within the view?
我想将一个字符串绑定到一个范围变量,它将通过用户在视图内的输入字段中输入来获取它的值。
这样连接到范围 var 值的字符串应该显示在视图中的另一个 div 中。
应该是这样的:
<body ng-controller="MainCtrl">
Name: <input ng-model="userInput" placeholder="Enter your input..."/><br>
<div>{{ "Hello" + userInput}}</div>
但这里的问题是 "Hello" 这个词在用户输入之前就已经显示了。我想在用户输入时将它与范围变量的值一起显示。
添加你自己的 filter
说 ifEmpty
如下:
angular.module('app').filter('ifEmpty', function() {
return function(input, defaultValue) {
if (angular.isUndefined(input) || input === null || input === '') {
return defaultValue;
}
return "Hello "+input;
}
});
然后用作
<div>{{ userInput | ifEmpty:''}}</div>
试试这个
Name: <input ng-model="userInput" placeholder="Enter your input..."/><br>
<div ng-show="!!userInput">{{ "Hello" + userInput}}</div>
可以使用多种不同的方法...ng-if
或者在表达式中使用三元是其中两个
<div ng-if="userInput">{{ "Hello" + userInput}}</div>
或者
<div>{{userInput ? "Hello" + userInput :''}}</div>
您可以在用户输入中使用 ng-if
。
<p ng-if="userInput">Hello {{userInput}}</p>
我想将一个字符串绑定到一个范围变量,它将通过用户在视图内的输入字段中输入来获取它的值。 这样连接到范围 var 值的字符串应该显示在视图中的另一个 div 中。
应该是这样的:
<body ng-controller="MainCtrl">
Name: <input ng-model="userInput" placeholder="Enter your input..."/><br>
<div>{{ "Hello" + userInput}}</div>
但这里的问题是 "Hello" 这个词在用户输入之前就已经显示了。我想在用户输入时将它与范围变量的值一起显示。
添加你自己的 filter
说 ifEmpty
如下:
angular.module('app').filter('ifEmpty', function() {
return function(input, defaultValue) {
if (angular.isUndefined(input) || input === null || input === '') {
return defaultValue;
}
return "Hello "+input;
}
});
然后用作
<div>{{ userInput | ifEmpty:''}}</div>
试试这个
Name: <input ng-model="userInput" placeholder="Enter your input..."/><br>
<div ng-show="!!userInput">{{ "Hello" + userInput}}</div>
可以使用多种不同的方法...ng-if
或者在表达式中使用三元是其中两个
<div ng-if="userInput">{{ "Hello" + userInput}}</div>
或者
<div>{{userInput ? "Hello" + userInput :''}}</div>
您可以在用户输入中使用 ng-if
。
<p ng-if="userInput">Hello {{userInput}}</p>