Weiheng Li Weiheng Li - 1 month ago 6
HTML Question

Some weird behavior of my angularjs

I am new in this field and trying to write a website, but I meet one problem. This is a simple version of my code which can run on your laptop:

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


About the myApp and all.js, I haven't write much about it. like this:

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

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


When you run it, you can find the five ng-shows don't work at all. If I delete
ng-controller="mainControl"
the first ng-show works well, but the others don't work.
I have tried for a long time and can't find any rules in this. Could you modify this code and give me the right version? or just tell me what's wrong with my code?

Answer

It works well here,

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