AngularJS入门-demo

最新推荐文章于 2024-05-28 11:44:38 发布

weixin_30548917

最新推荐文章于 2024-05-28 11:44:38 发布

阅读量122

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/zhangtianpei/p/10009055.html

版权

双向绑定测试：

<body ng-app>
    请输入姓名：<input ng-model="myname">
    <br>
    {{myname}},你好
</body>

这时候AngularJS会自动绑定对象myname，并且在下放的{{myname}}中显示出来

初始化指令：

　　通过ng-init来初始化对象，使对象有默认的数值：

<body ng-app   ng-init="myname='陈大海'">
　　请输入你的姓名：<input ng-model="myname">
　　<br>
　　{{myname}},你好
</body>

此时默认显示出来的内容：

陈大海，你好

控制器：

<script >
　　　　　　//定义一个对象函数
        var app =angular.module('myApp',[]);
　　　　　　//定义对象的controller，叫做myController，后方就是controller的内容
        app.controller('myController',function($scope){
            $scope.add=function(){
                return parseInt($scope.x)+parseInt($scope.y)
            }
        });
    </script>

调用

<body ng-app="myApp" ng-controller="myController">
    x:<input ng-model="x" >
    y:<input ng-model="y" >
        运算结果：{{add()}}
</body>

也可以用$scope.x=10，设定x默认值为10

事件指令：

<head>
    <title>
        demo
    </title>
    <script src="angular.min.js"></script>
    <script >
        var app =angular.module('myApp',[]);
        app.controller('myController',function($scope){
            $scope.x=10;
            $scope.add=function(){
                $scope.z=parseInt($scope.x)+parseInt($scope.y);
                
            }
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myController">
    x:<input ng-model="x" >
    y:<input ng-model="y" >
    <button ng-click="add()">运算</button>
        运算结果：{{z}}
</body>

创建$scope.z对象和函数，但是并不主动调用函数，当按下ng-click的时候，进行add()的调用，然后主动回显结果

循环：

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myController", function($scope) {
  $scope.list = [10,20,30,40]
    });
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
    <table>
        <tr ng-repeat="x in list">
            <td>{{x}}</td>
        </tr>
    </table>
</body

先用$scope创建一个list

在用ng-repeat命令调用该list

循环数组：

app.controller("myController", function($scope) {
    $scope.list= [
        {name:'张三',shuxue:100,yuwen:93},
        {name:'李四',shuxue:88,yuwen:87},
        {name:'王五',shuxue:77,yuwen:56}
    ];

    });
</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.shuxue}}</td>
            <td>{{entity.yuwen}}</td>
        </tr>

    </table>

类似类的调用。

内置服务：$http

<script>
    var app = angular.module("myApp",[]);
    app.controller("myController",function($scope,$http){
        $scope.findAll=function(){
            $http.get("data.json").success(
                function(response){
                    $scope.list=response;
                }        
            );
        }
    });
</script>
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="findAll()">
    <table>
        <tr>
            <td>姓名</td>
            <td>数学</td>
            <td>语文</td>
        </tr>
        <tr ng-repeat="entity in list">
            <td>{{entity.name}}</td>
            <td>{{entity.shuxue}}</td>
            <td>{{entity.yuwen}}</td>
        </tr>
    </table>

data.json

[
    {"name":"张三","shuxue":100,"yuwen":93},
    {"name":"李四","shuxue":88,"yuwen":87},
    {"name":"王五","shuxue":77,"yuwen":56},
    {"name":"赵六","shuxue":67,"yuwen":86}
]

要注意<body ng-init="findAll()"> 要初始化angularJS的函数，即$scope.findAll(),不然http会注入失败。

转载于:https://www.cnblogs.com/zhangtianpei/p/10009055.html

weixin_30548917

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS入门-demo

双向绑定测试：<body ng-app> 请输入姓名：<input ng-model="myname"> <br> {{myname}},你好</body>这时候AngularJS会自动绑定对象myname，并且在下放的{{myname}}中显示出来初始化指令：　　通过ng-init来初始化对...
复制链接

扫一扫