AngularJS第一个小例子

2019年9月15日 151次阅读 来源: 启程 
<!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第一个小例子》
这是《用AngularJS开发下一代Web应用》这本书里的一个例子，用来理解AngularJS的一些特性，MVC，其中输入框为Model，定义了ng-model后用来在输入框和item.quantity的值之间创建数据绑定关系，而{{}}这样的结构用来展示我们在controller中定义的值。

ng-repeat的意思是讲items的作用，不知道怎么说好，主要是用来循环提取items数组中每个属性的值然后添加到dom中。

button控件绑定的click事件用来移除当前行，ng-click在controller中定义，传入index的值用来达到移除的效果。

前边这段话写的乱七八糟的。仅当作一个记录吧。

    原文作者：启程
    原文地址: https://segmentfault.com/a/1190000000374591
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞