从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}];
<ul ng-repeat="x in menu" ng-if="x.fid == 1" ng-mouseenter="show = true" ng-mouseleave="show = false" ng-model="menu">
{{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", 他就不能被带点击