Question

我想将一个字符串绑定到一个范围var，它将通过用户输入在视图内的输入字段中获取其值。因此，连接到范围var值的字符串应显示在视图中的另一个div中。

应该是这样的：

<body ng-controller="MainCtrl">
Name: <input ng-model="userInput" placeholder="Enter your input..."/><br>
<div>{{ "Hello" + userInput}}</div>

但这里的问题是＆＃34;你好＆＃34;在用户输入之前已经显示。我希望在用户输入时将其与范围var的值一起显示。

Answer 1

可以使用多种不同的方法... ng-if或在表达式中使用三元是其中两种

<div ng-if="userInput">{{ "Hello" + userInput}}</div>

或者

<div>{{userInput ?  "Hello" + userInput :''}}</div>

Answer 2

试试这个

Name: <input ng-model="userInput" placeholder="Enter your input..."/><br>
<div ng-show="!!userInput">{{ "Hello" + userInput}}</div>

Answer 3

添加您自己的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>

Answer 4

您可以在用户输入上使用ng-if。

<p ng-if="userInput">Hello {{userInput}}</p>

如何将字符串绑定到视图中的范围var？

4 个答案: