ng-show 基于其他 html 元素的模型值

Question

我有一个简单的 Angular 程序，其中跨度必须仅在输入值为 'Peter' 时显示。我希望如果我更改输入值，则 span 必须消失，但是当我尝试更改输入框的值时，它不允许我这样做。我无法更改输入值的原因是什么？

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script> 
</head>
<body ng-app="myApp" ng-controller="myCtrl"> 
    <input type="text" ng-model="name"/>
    <span ng-show="name='peter'">{{name}}</span>
    <script>
    //module declaration
    var app = angular.module('myApp', []);
    //controller declaration
    app.controller('myCtrl',function($scope){
        $scope.name = "Peter";

    });
    </script> 
</body> 
</html>

Answer 1

将ng-show改为

<span ng-show="name.toLowerCase()==='peter'">{{name}}</span>

您正在使用赋值运算符，但您需要比较值并更改输入值的大小写。

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
  <script data-require="angular.js@1.4.8" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl"> 
    <input type="text" ng-model="name"/>
    <span ng-show="name.toLowerCase()==='peter'">{{name}}</span>
    <script>
    //module declaration
    var app = angular.module('myApp', []);
    //controller declaration
    app.controller('myCtrl',function($scope){
        $scope.name = "Peter";

    });
    </script> 
</body> 

</html>

Answer 2

试试这个。

<body ng-app="myApp" ng-controller="myCtrl"> 
   <input type="text" ng-model="name">
   <p ng-hide="name!== 'peter'">peter</p>
   <p ng-show="name!== 'peter'"></p>
   <script>
   //module declaration
   var app = angular.module('myApp', []);
   //controller declaration
   app.controller('myCtrl',function($scope){ 

});
</script>

ng-show 基于其他 html 元素的模型值

ng-show on the basis of model value of some other html element

javascript

angularjs

ng-show