名称测试器应用程序

Question

这是伪代码

Web App：nametester.html 用途：AngularJS 模型： - strName（存储String值）

---步骤： 1：使用带有提示的ng-model分配strName： '请输入你的名字：'

2：ng-show（if）“strName ==' - 在这里添加你的名字 - '”

3：输出'很棒的名字！'

4：ng-hide（else）“strName ==' - 在这里添加你的名字 - '”

5：输出strName，'不是我的名字'

在比较之前，使用小写过滤器将变量的值转换为小写。

我的代码

名称测试器应用程序

    <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>

但它不起作用。即使文本输入为空白，以及如何在比较之前将输入过滤为小写值，我看到“，不是你的名字”。

显示效果。当我输入我的名字时，我会以格式

获得输出

很棒的名字！本，不是你的名字

Answer 1

使用{{strVar | lowercase}}不会修改您的变量值。它只会以小写形式显示该特定用途。

你在ngShow / ngHide中的比较应该是：

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

Answer 2

如果您想要专门显示或隐藏其中一个跨距，那么只需使用内部具有相同表达式的ng-show和ng-hide。像这样：

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

和

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

Answer 3

首先，我们应该知道angularJS中的 ng-show =“”和 ng-hide =“”是什么。

简单来说 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

Answer 4

你走了。

在ng-hide中，您需要检查strName是否存在，或者是否设置为＆＃39; Ben＆＃39;。

这样做我们将此表达式!strName || strName == 'Ben'传递给ng-hide指令。您可以在下面运行代码段。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 5

以简单的方式，您可以这样做

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

显示/隐藏角度混乱

名称测试器应用程序

5 个答案: