您现在的位置:首页 >> 前端 >> 内容

angular script代码实例、anflar常用指令及anglarjs动态数据绑定讲解

时间:2018/2/2 14:27:28 点击:

  核心提示:anglarjs 动态数据绑定:AngularJS 中的数据绑定,同步了 AngularJS 表达式与 AngularJS 数据。{{ firstName }} 是通过 ng-model=firstN...

anglarjs 动态数据绑定:

AngularJS 中的数据绑定,同步了 AngularJS 表达式与 AngularJS 数据。

{{ firstName }} 是通过 ng-model="firstName" 进行同步。

anflar 指令:加在html标签上

常用的指令:

1.ng-app=""指定DOM元素受anglar js影响的作用域

2.ng-init="变量=‘值’;变量=‘值’”指令初始化应用程序数据

3.ng-model 指令把元素值(比如输入域的值)绑定到应用程序

MVC:(mdel:数据  view:视图 controller:控制器)

控制器做数据业务逻辑:(创建数据  数据增加 数据删除 数据查询)

anglar 的特性:

表达式:{{}}需要输出anglar数据变量都可以使用表达式完成

AngularJS 表达式写在双大括号内:{{}}

AngularJS 将在表达式书写的位置"输出"数据。

AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量  

angular  script代码:

  <script>

        //模块

            /*var gaoynapp=angular.Module("myApp",[]);//myapp相当于name*/

            var gaoynapp= angular.module("myApp",[]);//name==> myApp

            //控制器

            gaoynapp.controller("ctrlDemo",function($scope){// $scope  angular内置对象

                $scope.sex="男";

            //创建数组

            //$scope.stus=[{name:'张三',age:15,sex:'男'},{name:'李四',age:20,sex:'女'}];

            $scope.stus=[]

            //点击添加按钮进行添加====添加到数组stu

             $scope.save = function(){

                 $scope.stus.push({name:$scope.name,age:$scope.age,sex:$scope.sex})

             }

            });

        </script>

  html代码:

<body ng-app="myApp" ng-controller="ctrlDemo">

        <form>

            

            姓名:<input ng-model="name" /><br />

            年龄:<input ng-model="age" /><br />

            性别:<input type="radio" ng-model="sex" value="男" />男

                <input type="radio" ng-model="sex" value="女" />女<br />

                

                <input type="button" value="添加" ng-click="save()" />

        </form>

        

        <table border="1px" style="width: 400px;">

            <tr align="center">

                <td>姓名</td>

                <td>年龄</td>

                <td>性别</td>

            </tr>

            <tr ng-repeat="s in stus">

                <td>{{s.name}}</td>

                <td>{{s.age}}</td>

                <td>{{s.sex}}</td>

            </tr>

        </table>

        

    </body>

Tags:AN NG GU UL 
作者:网络 来源:androiddad