AngularJS第一個小例子

時間 2019-11-08

原文原文鏈接

<!DOCTYPE html>   
<html ng-app>   
<head>   
<meta charset="utf-8">   
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">   
<title>Examples</title>   
<meta name="description" content="">   
<meta name="keywords" content="">   
<link href="" rel="stylesheet">   
<style type="text/css">   
    span{display: inline-block;min-width: 100px;}   
    input{width: 100px;}   
</style>   
</head>   
<body ng-Controller="demoController">   
    <h1>{{demotitle}}</h1>   
    <div>   
        <span>標題</span>   
        <span>數量</span>   
        <span>單價</span>   
        <span>總結</span>   
        <span>操做</span>   
    </div>   
    <div ng-repeat="item in items">   
        <span>{{item.title}}</span>   
        <input type="text" ng-model="item.quantity"/>   
        <span>{{item.price | currency}}</span>   
        <span>{{item.price * item.quantity | currency}}</span>   
        <button ng-click="remove($index)">remove</button>   
    </div>   
<script src="angular.min.js"></script>   
<script>   
function demoController($scope){   
    $scope.demotitle = "第一個小例子";   
    $scope.items = [   
        {title:'test1',quantity:0,price:2.2},   
        {title:'test2',quantity:1,price:1.5},   
        {title:'test3',quantity:0,price:3.3},   
        {title:'test4',quantity:2,price:4}   
    ];   
    $scope.remove = function(index){   
        $scope.items.splice(index,1);   
    }   

}   
</script>   
</body>   
</html>

生成的頁面以下。

這是《用AngularJS開發下一代Web應用》這本書裏的一個例子，用來理解AngularJS的一些特性，MVC，其中輸入框爲Model，定義了ng-model後用來在輸入框和item.quantity的值之間建立數據綁定關係，而{{}}這樣的結構用來展現咱們在controller中定義的值。css