目录
ng-app 声明AngularJs作用范围,在标签内添加ng-app
ng-options select标签下使用,性能优于ng-repeat,使用时必须有ng-model
ng-app 声明AngularJs作用范围,在标签内添加ng-app
{{}}输出符号
ng-model 数据双向绑定
ng-init 初始化
controller自定义控制器
ng-click 点击事件
<!-- 使用自定义模块名称 使用的控制器名称 --> <body ng-app="testApp" ng-controller="testController"> <input type="text" placeholder="0" ng-model="x">+<input type="text" placeholder="0" ng-model="y"> <input type="button" name="" value="=" ng-click=add()>{{z}} <script type="text/javascript"> //第一个参数为自定义模块名字,第二个参数【】是引入其他模块,不引用为空 var app=angular.module('testApp',[]); //自定义控制器 //第一个参数为自定义控制器名,第二个$scope为域对象(类似HttpServletRequest) app.controller('testController',function($scope){//注入$scope //相加方法 $scope.add=function(){ $scope.z= parseInt($scope.x)+parseInt($scope.y); }; }); app.controller('otherController',function(){ }); </script> </body>
ng-repeat 循环
$index表示当前循环的索引值
<!-- 使用自定义模块名称 使用的控制器名称 --> <body ng-app="testApp" ng-controller="testController"> <select ng-model="selectedItem" ng-change="chenge()"> <option ng-repeat="x in items" value="{{x.id}}">{{x.name}}</option> </select> <ul ng-repeat="x in list"> <li>{{$index}}{{x}}</li> </ul> <h1>你选择的是: {{selectedItem}}</h1> <script type="text/javascript"> //第一个参数为自定义模块名字,第二个参数【】是引入其他模块,不引用为空 var app=angular.module('testApp',[]); //自定义控制器 //第一个参数为自定义控制器名,第二个$scope为域对象(类似HttpServletRequest) app.controller('testController',function($scope){//注入$scope $scope.list=[11,22,33,44]; $scope.items = [ {name: "aaaa", id : "1"}, {name : "bbbb", id : "2"}, {name : "ccc", id : "3"} ]; $scope.change = function(){ //获取被选中的值 var chengeitem = $scope.selectedItem; alert(chengeitem) //js代码实现option值变化后的查询等操作 } }); app.controller('otherController',function(){ }); </script> </body>
ng-options select标签下使用,性能优于ng-repeat,使用时必须有ng-model
<!-- 使用自定义模块名称 使用的控制器名称 --> <body ng-app="testApp" ng-controller="testController"> <select ng-model="selectedItem" ng-options="x.name for x in items"> </select> <h1>你选择的是: {{selectedItem.name}}{{selectedItem.id}}</h1> <script type="text/javascript"> //第一个参数为自定义模块名字,第二个参数【】是引入其他模块,不引用为空 var app=angular.module('testApp',[]); //自定义控制器 //第一个参数为自定义控制器名,第二个$scope为域对象(类似HttpServletRequest) app.controller('testController',function($scope){//注入$scope $scope.items = [ {name: "aaaa", id : "1"}, {name : "bbbb", id : "2"}, {name : "ccc", id : "3"} ]; }); app.controller('otherController',function(){ }); </script> </body>
$http 请求
<!-- 使用自定义模块名称 使用的控制器名称 --> <body ng-app="testApp" ng-controller="testController"> <h1>ok</h1> <ul ng-repeat="x in list"> <li>{{x.id}}-{{x.name}}-{{x.firstChar}}</li> </ul> <script type="text/javascript"> //第一个参数为自定义模块名字,第二个参数【】是引入其他模块,不引用为空 var app=angular.module('testApp',[]); //自定义控制器 //第一个参数为自定义控制器名,第二个$scope为域对象(类似HttpServletRequest) app.controller('testController',function($scope,$http){//注入$scope // $scope.items = $http.get("/web-manager/brand/findAll.do").success(function(response){ $scope.list=response; }); //entity是json,有自己的属性name,id等,上传的格式应为{"name":"bob","id":"1"} $http.post("/web-manager/brand/findAll.do",$scope.entity).success(function(response){ }) }); //其他controller app.controller('otherController',function(){ }); </script> </body>
$even.target
$controller 继承