AngularJs入门

最新推荐文章于 2023-05-26 01:00:00 发布

keyuzhang

最新推荐文章于 2023-05-26 01:00:00 发布

阅读量171

点赞数

分类专栏： AngularJs 文章标签： AngularJs

本文链接：https://blog.csdn.net/keyuzhang/article/details/88901362

版权

AngularJs 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

	<!-- 使用自定义模块名称     使用的控制器名称 -->
<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 继承

keyuzhang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJs入门

目录ng-app 声明AngularJs作用范围,在标签内添加ng-app{{}}输出符号ng-model 数据双向绑定ng-init 初始化controller自定义控制器ng-click 点击事件ng-repeat 循环ng-options select标签下使用,性能优于ng-repeat，使用时必须有ng-model$http 请求ng-ap...
复制链接

扫一扫