Javascript 如何将字符串绑定到视图中的范围变量？_Javascript_Angularjs_Ionic Framework_Ngcordova_Ionic View

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

javascript angularjs ionic-framework

Javascript 如何将字符串绑定到视图中的范围变量？,javascript,angularjs,ionic-framework,ngcordova,ionic-view,Javascript,Angularjs,Ionic Framework,Ngcordova,Ionic View,我想将一个字符串绑定到一个scope变量，该变量将通过用户在视图中的输入字段中输入来获取其值。因此，连接到scope var值的字符串应该显示在视图中的另一个div中应该是这样的： <body ng-controller="MainCtrl"> Name: <input ng-model="userInput" placeholder="Enter your input..."/><br> <div>{{ "Hello" + userInput

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

应该是这样的：

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


名称：

{{“Hello”+userInput}

但这里的问题是，“Hello”一词在用户输入之前就已经显示了。我想在用户输入时将其与范围变量的值一起显示。

添加您自己的

过滤器

如下图所示，说

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>

{{userInput|ifEmpty:''}

试试这个

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

名称：

{{“Hello”+userInput}

可以使用多种不同的方法

ng，如果其中两个为

或在表达式中使用三元

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

{{“Hello”+userInput}

或

{{userInput？“你好”+userInput:'}

您可以在用户输入上使用

ng if

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

你好{{userInput}

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