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

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

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

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

But the problem here is that the word "Hello" displays already before the user input is made. I want to display it together with the value of the scope var when the user input it.


ionic-framework javascript angularjs ionic-view ngcordova
person user2985035    schedule 19.01.2016    source источник

Ответы (4)


arrow_upward
2
arrow_downward

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

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

Or

<div>{{userInput ?  "Hello" + userInput :''}}</div>
person charlietfl    schedule 19.01.2016

arrow_upward
1
arrow_downward

Попробуй это

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

arrow_upward
0
arrow_downward

Добавьте свой собственный 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>
person Guruprasad J Rao    schedule 19.01.2016

arrow_upward
0
arrow_downward

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

<p ng-if="userInput">Hello {{userInput}}</p>
person denixtry    schedule 19.01.2016