我的一些奇怪的行为angularjs

我是这个领域的新手，并试图写一个网站，但我遇到了一个问题。这是我的一个简单的代码版本，可以在笔记本电脑上运行：我的一些奇怪的行为angularjs

<!DOCTYPE html> 
<html lang="en" ng-app='myApp'> 
<head> 
    <meta charset="utf-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <script src="js/all.js"></script> 
    <script> 
     var show=false 
     var notshow=true 
    </script> 
</head> 
<body ng-controller="mainControl"> 
     Hide HTML: <input type="checkbox" ng-model="myVar"> 
     <div ng-show="myVar"> 
      <button>Sign Up</button> 
      <button>Log In</button> 
     </div> 
     <div ng-show="show"> 
      <button>Sign Up</button> 
      <button>Log In</button> 
     </div> 
     <div ng-show="logged"> 
      <button>Sign Up</button> 
      <button>Log In</button> 
     </div> 
     <div ng-show="notshow"> 
      <button>Sign Up</button> 
      <button>Log In</button> 
     </div> 
     <div ng-show="visiter"> 
      <button>Sign Up</button> 
      <button>Log In</button> 
     </div> 

</body> 
</html>

关于对myApp和all.js，我没有写很多关于它。像这样：

(function(){ 
    angular.module('myApp',[]) 
})() 

(function(){ 
    'use strict'; 
    angular.module('myApp').controller('mainControl',function($scope){ 
     $scope.logged=false; 
     $scope.visiter=true; 
    }) 
})()

当你运行它时，你会发现五个ng-shows根本不起作用。如果我删除ng-controller="mainControl"，那么第一个ng显示效果很好，但其他显示效果不好。我已经尝试了很长时间，无法在此找到任何规则。你能修改这段代码并给我正确的版本吗？或者告诉我我的代码有什么问题？

来源

2016-11-01 Weiheng Li

使用这么多的ng-show需要什么？ – Sajeetharan

其实只需要一个，但我正在做一些关于变量 –

它运作良好，在这里，

var app = angular.module('myApp', []); 
app.controller('mainControl', function($scope) { 
    $scope.logged = false; 
    $scope.visiter = true; 
})

HTML

<body ng-controller="mainControl"> 
    Hide HTML: 
    <input type="checkbox" ng-model="myVar"> 
    <div ng-show="myVar"> 
    <button>Sign Up</button> 
    <button>Log In</button> 
    </div> 
    <div ng-show="show"> 
    <button>Sign Up</button> 
    <button>Log In</button> 
    </div> 
    <div ng-show="logged"> 
    <button>Sign Up</button> 
    <button>Log In</button> 
    </div> 
    <div ng-show="notshow"> 
    <button>Sign Up</button> 
    <button>Log In</button> 
    </div> 
    <div ng-show="visiter"> 
    <button>Sign Up</button> 
    <button>Log In</button> 
    </div> 
</body>

DEMO

来源

2016-11-01 04:37:53 Sajeetharan

我不精通JavaScript，因此我不能发表评论

(function(){... code ...})())

你正在使用的模式，但你明确忘记()在第二个块。

来源

2016-11-01 04:38:49 arrowd

的使用的测试是的，你是对的。其实我也忽略了';' –

我不能接受两个答案，所以我给你一个upvote。 –

我的一些奇怪的行为angularjs

回答

相关问题