Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html ng-app>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script> 
    <script type="text/javascript">
        var DemoCtrl = function($scope){
            //在這裡設定預設值
            $scope.X = 0;
            $scope.Y = 0;
​
            $scope.Name = "Ming";
​
            $scope.ShowModel = "1";
​
            $scope.ChangeShow = function(){
                $scope.ShowModel = $scope.ShowModel == "1" ? "0" : "1";
            }
        };
    </script>
</head>
<body ng-controller="DemoCtrl">
    <div class="well span6" ng-show="ShowModel=='1'">
        <label>姓名:</label>
        <input type="text" placeholder="輸入大名" ng-model="Name">
        <hr>
        Hello:<span style="color:blue;font-size:20" > {{Name}}</span>!! Welcome 
    </div>  
    <div class="well span6" ng-hide="ShowModel=='1'">
        <label>數學教學時間:</label>
        加法：X + Y = ?<br/>
        加法：
            <input type="number" ng-model="X" style="width:100px" placeholder="X"> 
            + 
            <input type="number" ng-model="Y" style="width:100px" placeholder="Y"> 
            = {{ X+Y }}<br/>    
        乘法：
            <input type="number" ng-model="X" style="width:100px" placeholder="X"> 
            * 
            <input type="number" ng-model="Y" style="width:100px" placeholder="Y"> 
            = {{ X*Y }}
    </div>  
    <div class="well span6" style="float:none;">    
    <button ng-click="ShowModel = (ShowModel == '1' ? '0' : '1')">switch</button>
    <button ng-click="ChangeShow()">switch By Function</button>
    <br/>
    <a href="http://jsbin.com/quteyi/2/edit" target="_self">太多畫面要切換？別在Show、Hide了！！</a>
    </div>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
kkman021pro
0viewers