Это псевдо-кодПоказать/скрыть угловую путаницу

Web App: nametester.html Использование: AngularJS Модель: - strName (который хранит значение типа String)

--- Шаги: 1: Назначение strName с помощью нг-модель с подсказкой: 'Пожалуйста, введите ваше имя:'

2: нг-шоу (если) "strName == '-Добавить ваше имя здесь-'"

3: Вывод «Удивительное имя!»

4: нг скрыть (еще) "strName == '-Добавить ваше имя здесь-'"

5: Выход strName 'это не мое имя'

Используй строчный фильтр преобразуйте значение переменной в нижний регистр, прежде чем сравнивать.

И мой код

Имя Tester App

<p><label for="name">Please Enter Your Name:</label> 
    <input type="text" id="name" data-ng-model="strName"/></p> 
    <span>{{strVar | lowercase}}</span> 
     <p> 
      <span data-ng-show ="strName =='Ben'"> Awesome Name</span> 
      <span data-ng-hide ="strName =='Someone'">{{strName}}, is not your name</span> 
     </p>

Но это не работает. Я вижу «, не ваше имя», даже когда текстовый ввод пуст и как фильтровать входные данные до нижнего регистра до его сравнения.

Показать работы. Когда я добавляю свое имя, я получаю вывод в формате

Awesome Name! Бен, не ваше имя

источник

2016-03-18 Anonymous

Могли бы вы настроить plunkr? –

Удалите пробелы между 'data-ng-show' и' = 'и' data-ng-hide' и '='. – str

@str пытался, не работает. –

Использование {{strVar | lowercase}} не изменит значение переменной. Он будет отображаться только в нижнем регистре для этого особого использования.

Ваше сравнение внутри ngShow/ngHide должно быть:

<span ng-show="strName.toLowerCase() == 'Ben'.toLowerCase()" />;

источник

2016-03-18 06:41:39 ThiagoPXP

Спасибо. А как насчет интервала ng-hide? Он появляется, даже когда заполненный пробел, и он продолжает отображаться после того, как имя будет сопоставлено как это Удивительное имя! Бен, это не ваше имя. –

Он будет скрываться только в том случае, если имя входа «Кто-то». Вероятно, вы хотите, чтобы это было {{strName}}, не ваше имя – henrikmerlander

@henrikmerlander, когда я это делаю, он никогда не показывает эту инструкцию, даже если я набираю неправильно. –

Если вы хотите, чтобы только показать или скрыть один из пролетов, а затем просто использовать нг-шоу и нг-шкурку с тем же выражением внутри. Как это:

<span data-ng-show="strName =='Ben'"> Awesome Name</span>

<span data-ng-hide="strName =='Ben'">{{strName}}, is not your name</span>

источник

2016-03-18 09:07:15 henrikmerlander

Прежде всего, мы должны знать, что нг-шоу = "" и нг скрытие = "" в angularJS.

Простым термином Директива ng-show показывает или скрывает элемент HTML. Если условие истинно, оно будет показать содержание. Если нет, то этого не произойдет. Поэтому мы можем использовать ng-show для шоу и для скрытия.

Директива ng-hide показывает или скрывает элемент HTML. Если условие истинно, оно будет скрыть содержание. Если нет, то этого не произойдет. Поэтому мы можем использовать ng-hide для шоу и скрытия. Отсылая эти советы, вы делаете небольшую ошибку, сравнивая строки в самой директиве. Пожалуйста, удалите эти условия.

<!DOCTYPE html> 
<html ng-app='nametest'> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title> Show Hide</title> 
</head> 
<body ng-controller='strName'> 

<p><label for="name">Please Enter Your Name:</label> 
<input type="text" id="name" data-ng-model="strName1" > </p> 
<span>{{strName1 | lowercase}}</span> 

<span data-ng-show ="temp"> Awesome Name</span> 
    <span data-ng-show ="!temp"> Is not My Name</span> 

</body> 
</html> 

**Controller :** 



var app = angular.module('nametest',[]); 

app.controller('strName',function($scope){ 
    $scope.strName1 = 'Ben'; 
    var my_Name = $scope.strName1; 
    $scope.temp = false; 
    if(my_Name == "Ben"){ 
    console.log('Success'); 
    $scope.temp = true; 
    } 

});

Для получения более подробной информации посетите .. https://jsbin.com/pokukudoyo/edit?html,js,output

источник

2016-03-18 09:59:15

На самом деле это неприемлемо. Нам еще не разрешено использовать контроллер. и мы должны использовать оператор show и hide. Проверьте мой псевдокод. –

Здесь вы идете.

В ng-hide вам необходимо установить, что strName не существует ИЛИ что он установлен на «Бен».

Сделайте это, чтобы передать это выражение !strName || strName == 'Ben' директиве ng-hide. Вы можете запустить сниппет ниже.

angular.module('app', []);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 

 
     <p><label for="name">Please Enter Your Name:</label> 
 
    <input type="text" id="name" data-ng-model="strName"/></p> 
 
    <span>{{strVar | lowercase}}</span> 
 
     <p> 
 
      <span data-ng-show ="strName =='Ben'"> Awesome Name</span> 
 
      <span data-ng-hide ="!strName || strName == 'Ben'">{{strName}}, is not your name</span> 
 
     </p> 
 

 
</div>

источник

2016-03-18 10:34:45 Martin

В простом случае вы можете сделать это

<span ng-show="strName.toLowerCase() == 'ben'" />;

источник

2016-11-30 07:32:54 Firasath

Показать/скрыть угловую путаницу

Имя Tester App

ответ

Смежные вопросы