首页 > 代码库 > angularJS

angularJS

2024-08-19 17:13:13   220人阅读

AngularJS 是一个 JavaScript 框架

AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

AngularJS 是以一个 JavaScript 文件形式发布的，引入方式如下：

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

基本指令

ng-app 指令定义一个 AngularJS 应用程序。

ng-controller 指令区分模块域。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

ng-bind 指令把应用程序数据绑定到 HTML 视图。

ng-show/hide/if 指令数据显示或隐藏。

ng-checked 指令选中元素

ng-submit 表单提交绑定方法

ng-disabled 验证数据点击次数 ng-disabled="form[name].$invalid"

 1 <body ng-app="app" style="padding:10px">
 2     <div ng-controller="form">
 3         <form name="forms" ng-submit="register()">
 4             <fieldset>
 5                 <legend>基本信息</legend>
 6                 <img ng-class="{‘img‘:user.imgClass}" ng-show="{{user.imgShow}}" ng-src="http://www.mamicode.com/{{user.url}}">
 7                 <div style="padding:10px 20px">
 8                     <input class="form-control" type="text" placeholder="用户名" required /></br>
 9                     <input class="form-control" type="password" placeholder="密码" required />
10                     职位：<select class="form-control">
11                         <option>---select-</option>
12                         <option ng-selected="user.zw==1">web</option>
13                         <option ng-selected="user.zw==2">android</option>
14                     </select>
15                     性别：<input ng-checked="user.sex==1" type="radio" name="sex" value="http://www.mamicode.com/男">
16                     <input  ng-checked="user.sex==2" type="radio" name="sex" value="http://www.mamicode.com/女">
17                 </div>
18             </fieldset>
19             <fieldset>
20                 <legend>爱好</legend>
21                 <div style="padding:10px 20px">
22                     <input type="checkbox" ng-checked="choice(1)"/>&nbsp;&nbsp;篮球&nbsp;&nbsp;
23                     <input type="checkbox" ng-checked="choice(2)"/>&nbsp;&nbsp;排球&nbsp;&nbsp;
24                 </div>
25             </fieldset>
26             <button ng-disabled="forms.$invalid" type="submit" class="button expand" style="display:block;margin:0 auto">submit</button>
27         </form>
28     </div>
29     <script type="text/javascript" src="http://www.mamicode.com/js/angular.js"></script>
30     <script type="text/javascript" src="http://www.mamicode.com/js/controller.js"></script>
31 </body>

 

 1 angular.module(‘app‘,[])
 2 .controller(‘Task1‘,function($scope){
 3     $scope.task="";
 4     $scope.tasks=[];
 5     $scope.add=function(){
 6         $scope.tasks.push($scope.task);
 7     }
 8 })
 9 .controller(‘Task2‘,function($scope){
10     $scope.task="";
11     $scope.tasks=[];
12     $scope.add=function(){
13         $scope.tasks.push($scope.task);
14     }
15 })
16 .controller(‘loginmodel‘,function($scope){
17     $scope.user={name:‘‘,pwd:‘‘};
18     $scope.errmsg="";
19     $scope.logining = function(){
20         if($scope.user.name == "admin" && $scope.user.pwd == "123"){
21             alert("success");
22         }else{
23             $scope.errmsg = "username or userpassword err!";
24         }
25     }
26 
27 })
28 .value(‘valued‘,‘xujiangli‘)//可以改变其值
29 .constant(‘constant‘,"http://www.baidu.com")
30 .factory(‘data‘,function(){
31     return {
32         msg:‘are you ok!‘,
33         msgFun:function(){
34             this.msg = ‘yes I am fine‘;
35         }
36     }
37 })
38 .controller(‘jinjie‘,function($scope,valued,constant,data){
39     $scope.value =http://www.mamicode.com/ valued;
40     $scope.contant = constant;
41     $scope.data =http://www.mamicode.com/ data;
42     data.msgFun=data.msgFun();
43 })
44 //form
45 .controller("form",function($scope){
46     $scope.user={
47         url:‘img/haohao.png‘,
48         imgShow:true,
49         imgClass:true,
50         name:‘‘,
51         pwd:‘‘,
52         sex:‘2‘,
53         zw:‘1‘,
54         perzition:[1,2,3]
55     };
56     // checkbox
57     $scope.choice=function(n){
58         var se = false;
59         for (var i = 0; i < $scope.user.perzition.length; i++) {
60             if(n==$scope.user.perzition[i]){
61                 le = true;
62                 break;
63             }
64         }
65         return le;
66         console.log(n);
67     };
68     //form submit
69     $scope.register=function(){
70         console.log(‘submit‘)
71     }
72 
73 })

 

　　

angularJS


联系
我们