Anglar js 的一些基本指令

来源：互联网发布：3dmax软件编辑：程序博客网时间：2024/06/03 14:56
<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <title></title>    <script src="js/angular.min.js"></script>    <script>        /*自己定义一个 应用名()*/        var app= angular.module("MyApp",[]);//前面的是名字，后面是数据类型  --数组        //controller 控制器的名字; 第2个参数数组类型[$scope(由Anglarjs提供的作用域对象)  ]        app.controller("MyDeom",["$scope",function($scope){            //作用域下面 有个数据name            $scope.name="这就是我输入的内容!!!!!!";        }]);        //        app.controller("MyTwoDeom",["$scope",function($scope){            //数据模型            $scope.myname="我的我的我的-----";            $scope.hobby="吃,睡,花钱";        }]);        //计算        app.controller("ThreeDeom",["$scope",function($scope){            $scope.sum = function(a,b){                $scope.result = a+b;            }        }]);        //替换        app.controller("FourDeom",["$scope",function($scope){            //声明变量数组---->放入到视图html            $scope.datas=["苹果","香蕉","西红柿","葡萄"];            $scope.stus=[{name:'张三',age:13,sex:"男"},{name:'美丽',age:19,sex:"女"}];        }]);        //全局变量   三个参数的        app.controller("FiveDeom",["$scope","$rootScope",function($scope,$rootScope){            $rootScope.name="我是全局变量";        }]);        app.controller("SixDeom",["$scope","$rootScope",function($scope,$rootScope){            $scope.username=$rootScope.name;        }]);    </script></head>    <!--ng-app  定义angular js 的使用范围-- 这里是说定义angular js在这个div生效-;;引用的是自己定义的名字--><body ng-app="MyApp">    <!--数据模型层(框中输入的数据作为anglarjs的模型) -->    <input ng-model="abc" />    <p>        <!--视图来展示 数据模型-->        字符串拼接:{{"hello,,"+abc}}<br />        <!--算术练习-->        算术练习:{{9-2}}<br />        <!--关系运算-->        关系运算: {{9>2}}    </p>    <!--来自于控制器的数据-->    <div ng-controller="MyDeom">        来自于控制器的数据::::::::        {{name}}            </div>    <p ng-controller="MyTwoDeom">        {{myname}}的爱好为:{{hobby}}    </p>    <!--声明变量-->    <div>        <!--声明变量,并赋值--><!--就是init声明name，后面是name的值-->        <p  ng-init="name='声明变量,并赋值'">            {{name}}        </p>        <!--声明变量,并赋值-->        <ul  ng-init="stu={name:'张三',age:13,sex:'男'}">        <li>{{stu.name}}</li>        <li>{{stu.age}}</li>        <li>{{stu.sex}}</li>    </ul>    </div>    <!--计算-->    <div ng-controller="ThreeDeom">        <p>计算的值是=={{result}}</p>        <input type="button" value="计算" ng-click="sum(2,3)" />    </div>    <!--替换-->    <div ng-controller="FourDeom">        <ul>            <!--把datas通过in替换成a--><!--{{$index}}是序号-->            <li ng-repeat="a in datas">{{$index}} {{ a}}</li>        </ul>        人员信息        <ul>            <li ng-repeat="stu in stus">                编号:{{$index +1}}  姓名:{{stu.name}}年龄:{{stu.age}}  性别:{{stu.sex}}                        </li>        </ul>        宠物列表        <ul ng-init="dogs=[{name:'小江子',age:3}]">            <li ng-repeat="stu in dogs">                <!--ng-bind绑定    把年龄绑定到span标签-->                编号:{{$index +1}}  姓名:{{stu.name}}年龄:<span ng-bind="stu.age"></span>            </li>        </ul>    </div>    <!--隐藏和显示-->    <div>        <p ng-show="1">当值为true时显示(show=1或show=true)，为false时不显示（hide=0显示或hide=false）</p>        <p ng-hide="false">当值为true时显示（hide=1不显示或hide=true），为false时不显示(show=0或show=false)</p>    </div>    <!--全局变量-->    <div>        <!--在控制器FiveDeom中调用 name变量 -->        <ul ng-controller="FiveDeom">            <li>{{name}}</li>        </ul>        <!--在控制器SixDeom中调用 全局name变量-->        <ul ng-controller="SixDeom">            <li>{{name}}</li> <!--SixDeom中是否有name?-->                       <li>{{username}}</li> <!--SixDeom中是否有name?-->        </ul>    </div></body></html>
阅读全文
0 0