码迷,mamicode.com
首页 > 其他好文 > 详细

angular 入门

时间:2019-11-13 13:22:42      阅读:54      评论:0      收藏:0      [点我收藏+]

标签:ESS   col   splay   event   技术   控制   初始   strong   --   

入门

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/angular.min.js"></script>
    </head>
    
    <body ng-app>
        {{100+100}}
    </body>
</html>

技术图片

 

双向绑定

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/angular.min.js"></script>
    </head>
    <body ng-app>
        喜欢谁
        <input type="text" ng-model="myname" />
        喜欢{{myname}}
    </body>
</html>

技术图片

 

 初始化值1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/angular.min.js"></script>
    </head>
    <body>
        <body ng-app ng-init="myname=‘proyuan‘">
            请输入你的姓名:<input ng-model="myname">
            你的名字是{{myname}}
        </body>
    </body>
</html>

技术图片

 

 两数相加

技术图片
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/angular.min.js"></script>
        <script>
            var app=angular.module(‘MyApp‘,[])
            app.controller(‘mycontroller‘,function($scope){
                $scope.add=function(){
                    return parseInt($scope.x)+parseInt($scope.y)
                }
            });
        </script>
    </head>
    <body ng-app=‘MyApp‘ ng-controller=‘mycontroller‘>
        <!--ng-controller为程序添加控制器-->
        x:<input ng-model="x" />
        y:<input ng-model="y" />
        结果{{add()}}
    </body>
</html>
View Code

技术图片

点击事件

技术图片
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/angular.min.js"></script>
        <script>
            var app=angular.module(‘MyApp‘,[])
            app.controller(‘mycontroller‘,function($scope){
                $scope.add=function(){
                    $scope.z=parseInt($scope.x)+parseInt($scope.y)
                }
            });
        </script>
    </head>
    <body ng-app=‘MyApp‘ ng-controller=‘mycontroller‘>
        <!--ng-controller为程序添加控制器-->
        x:<input ng-model="x" />
        y:<input ng-model="y" />
        <button ng-click="add()">点击</button>
        结果{{z}}
    </body>
</html>
View Code

 技术图片

 

 循环数组(注意集合不能重复...)

技术图片
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <script type="text/javascript" src="js/angular.min.js"></script>
        <script>
            var app = angular.module(‘myApp‘,[])
            app.controller(‘mycontroller‘,function($scope){
                $scope.list=[66,87,43,32,08];
            });
        </script>
    </head>
    <body ng-app="myApp" ng-controller="mycontroller">
        <table>
            <tr ng-repeat="x in list">
                <td>{{x}}</td>
            </tr>
        </table>
    </body>
</html>
View Code

技术图片

 

 循环数组对象

技术图片
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/angular.min.js"></script>
        <script>
            var app=angular.module(‘MyApp‘,[])
            app.controller(‘mycontroller‘,function($scope){
                $scope.list=[
                    {name:‘sx‘,address:‘保定‘,tel:1515},
                    {name:‘xy‘,address:‘保定‘,tel:1515},
                    {name:‘sy‘,address:‘保定‘,tel:1515}
                ]
            });
        </script>
    </head>
    <body ng-app="MyApp" ng-controller="mycontroller">
        <table>
            <tr>
                <td>姓名</td>
                <td>地址</td>
                <td>电话</td>
            </tr>
            <tr ng-repeat="entity in list">
                <td>{{entity.name}}</td>
                <td>{{entity.address}}</td>
                <td>{{entity.tel}}</td>
            </tr>
        </table>
        
    </body>
</html>
View Code

技术图片

 

 

 

 

 

 

 

angular 入门

标签:ESS   col   splay   event   技术   控制   初始   strong   --   

原文地址:https://www.cnblogs.com/proyuan/p/11847894.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!