Context in AngularJS Expression

by taly2808

HTML

<script src="https://code.angularjs.org/1.3.0/angular.js"></script>
<div ng-app="app" ng-controller="mainCtrl">
    <em> chỉ hiển thị được giá trị của var1, var3 </em>
    <p>value of var1: <b>{{var1 + y}}</b></p>
    <p>value of var2: <b>{{var2}}</b></p>
    <p>value of var3: <b>{{var3}}</b></p>    
    <hr/>
    <em> với biến <b>y</b> chưa được khai báo, angular xem nó có giá trị là undefined </em>
    <p>value of var3 + y: <b>{{var3 + y}}</b></p>
    <p>y isUndefined: <b>{{checkUndefined(y)}}</b></p>    
    <hr/>
    <em>Function trong controller có thể được gọi và trả lại giá trị đã được tính toán trong expression</em>
    <p>var2 isDefined (call function checkDefined()): <b>{{checkDefined(var2)}}</b></p>
    <p>return value of function "upperString()" : <b>{{upperString('hello world!')}}</b></p>
    <hr/>
    <em>Các toán tử</em>
    <p>var1 - var3 < 10 : <b>{{var1 - var3 < 10}}</b></p>
    <p>var3 === 10 : <b>{{var3 === 10}}</b></p>
    <p> 30 %(mod) 29 = <b>{{ var3 % 29 }}</b> </p>
    <em><b>Không</b> thể sử dụng toán tử ++, --. Uncomment để xem kết quả </em>
    <!-- <p> ++30 = {{++30}}</p> -->
    <hr/>
    <em>Toán tử tam nguyên</em>
    <p>var1 <b>{{var1>0?'greater than 0':'less than 0'}}</b> </p>
    <hr/>
    <em>Một số trường hợp không thể sử dụng(uncomment để thấy kết quả)</em>
    <!-- If else -->
    <!-- <p> {{ if(var1>0)var1 else var3  }} </p> -->

    <!-- loops -->
    <!--<p> {{while(var1>0){var1=var1-1;}}} </p>-->

    <!--Expression inside expression -->
    <!--<p> {{var1 + {{var2}}}}-->
</div>

JavaScript

angular.module('app', [])
.controller('mainCtrl', function($scope){
    //chỉ có các biến được khai báo trong scope mới có thể truy cập được
    var var2 = 20;    
    $scope.var1 = 10;
    $scope.var3 = 30;
    
    $scope.upperString = function(str) {
        return angular.uppercase(str);
    }
    $scope.checkDefined = function(val) {
        return angular.isDefined(val);
    }
    $scope.checkUndefined = function(val) {
        return angular.isUndefined(val);
    }
});