Как привязать строку к области var в представлении?

Я хочу привязать строку к области VAR, которая получит свое значение путем ввода пользователем в поле ввода внутри представления. Таким образом, строка, связанная со значением var области, должна отображаться в другом div в представлении.

Это должно быть что-то вроде:

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

Но проблема здесь заключается в том, что слово "Hello" отображается уже до ввода пользователем. Я хочу отобразить его вместе со значением области var, когда пользователь вводит его.

4 3
javascript angularjs ionic-framework

4 ответа:

Может использовать множество различных подходов ... ng-if или использовать тернарное выражение в двух из них 

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

Или 

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

Попробуйте это 

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

Добавьте свой собственный 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>
0

Вы можете использовать ng-if на входе пользователя.

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