Angular.的简单运用

从script引用angular文件.开始编写angular事件:

在angular文件中添加属性: ag-xxxx;
初始化使用: ng-app="name"; 没有这个属性就不会有框架效果

如果{ng-app}有属性值的话, 则脚本文件中必须添加模型初始化代码: var app = angular.module("name",[]);

有了模块,还必须添加控制器, 这样才能读取到页面上的绑定的数据:
添加angular控制域:
app.controller("控制器名字",function($scope){}); 只能对挂载了ng-controller 内的标签才生效.

如果ng-controller 写在一个 div 标签内, 则只在这个div标签内有效, 不在这个div内的ng属性则不受controller影响.

$scope. 可以过去页面中绑定的值可以取值也可以设置值;

在一个span标签内: <span ng-model="num"><//span>

$scope.num=1; 设置num值为1:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>angular简单运用</title>
</head>
<body ng-app="myApp" ng-controller="myCon">
　　　　//显示输入字符的个数  简单练手 数据绑定  更为直观
    <input ng-model="text" ng-change="changeval()"/>
        {{num}}/30

        <span>
        {{num3}}
        </span>

</body>
<script src="./view/js/angular.js"></script>
<script>
        var app = angular.module("myApp",[]);

        app.controller("myCon",function($scope,$interval){
　　　　　　　　//通过changval事件显示字符串的长度
            $scope.changeval = function(){
                $scope.num = $scope.text.length;
            };

        // 定时器服务:$interval

　　　　　　　　　　$scope.num3 = new Date().toLocaleString();
　　　　　　　　　　$interval(function(){
　　　　　　　　　　$scope.num3 = new Date().toLocaleString();
　　　　　　　　　　},1000)


　　　　　　　
        });

    </script>
</html>

在页面中一共有三种数据绑定的方式:

ng-model 这个是双向绑定: (表单控件 input)

ng-bind 　和　　{{ng的一个变量名}} 　　单项绑定　　用来显示数值的

ng-bind 中不能写内容,他所有的内容都会被绑定的值所代替, 写入的值并不能被显示,.

ng-bind 　　{{}}　　这两个绑定函数 -> 显示函数的返回值　　{{}} 可以直接在函数中赋值,并同步到页面上显示.

--------------------------------------------------------------------------------------------------------------------------------------

ng-show="" 当这个值等于 true 就显示,否则就隐藏.
ng-hide="" 当这个值等于 true 就隐藏,否则就显示.

通过一个事件可以改变现实跟隐藏: $scope.ngshow = !ngshow;　　把他的值等于他的相反值,就可以做到显示时点击隐藏,隐藏时点击显示

ng-repeat="x in menu" ng的数据绑定循环一般用来显示二级菜单

var menu = [{id=1,name='一级菜单',fid=0},
                    {id=2,name='一级菜单',fid=0},
                    {id=3,name='二级菜单',fid=1},
                    {id=4,name='一级菜单',fid=2}];

{{x.pName}}
　　<li ng-repeat="y in menu" ng-if="y.fid == x.id" ng-show="show" ng-model="submenu" class="{{x.pId}}">{{y.pName}}</li>
</ul>

ng-if="x.name == 0"; ng的循环跟 if 判断

angular表单验证:
form 必须有一个name{myForm}, input必须有一个name{user} 和 ng-model 还有 require="require".
一个提示信息框内绑定属性 <span myForm.user.$error.require>;

但一个按钮的值 ng-disabled="true", 他就不能被带点击