zoukankan      html  css  js  c++  java
  • angularjs

    angularJS四大核心特性:
    核心特性1:MVC
    核心特性2:模块化与依赖注入
    核心特性3:双向数据绑定
    核心特性4:Directive与UI控件

    1.使angularJS必须在html标签上加入app
    <html ng-app="myApp">
    2.定义控制器
    var myApp=angular.module("myApp",[]);
    myApp.controller("controllername",function($scope,$http){});
    3.注意controller的作用域问题,即当前angular操作只能在当前的controller下;
    4.angularJS数据的双向绑定
    <input type="text" ng-model="person.name" placeholder="Your Name"/>
    <span>{{person.name}}</span>
    5.angularjs自定义标签(E)属性(A)(使用过滤器设置时间格式)
    var myApp=angular.module("myApp",[]);
    myApp.directive("clock",function($filter){
    var date=new Date();
    return{
    restrict:"E",
    replace:true,
    //replace的值为false时不替换属性
    template:function(ele,attr){
    var dateStr=$filter("date")(date.getTime(),attr.dateFormat);
    return "<span>"+dateStr+"</span>"
    }
    }
    });
    <clock date-format="yyyy年MM月dd日 HH:mm:ss EEE"></clock>
    6.angularjs上下文发生变化须在页面同时显示是必须加入digrest的apply属性
    myApp.directive("isSame",function(){
    return {
    restrict:"A",
    require:"ngModel",//指定在改属性所在的标签中必须加入ng-model指令
    link:function(scope,element,attr,model){
    //为当前元素标签绑定事件
    element.bind("blur",function(){
    console.log(element.val()+ " "+scope.pwd);
    scope.$apply(function(){
    if(element.val() == scope.pwd){
    model.$error.samePwd = false;
    }else{
    model.$error.samePwd = true;
    }
    });

    });
    }
    }
    });
    7.自定义过滤器:
    //大小写转换
    myApp.filter("upper",function(){
    return function(input,value){
    if(input){
    if(value == 1){
    return input.toUpperCase();
    }else{
    return input.toLowerCase();
    }
    }else{
    return input;
    }
    }
    });
    //倒序输出
    myApp.filter("desc",function(){
    return function(input,value){
    var descAry=[];
    if(input){
    for(var i=input.length-1;i>=0;i--){
    descAry.push(input[i]);
    }
    if(value==1){
    return descAry.join("");
    }
    else{
    return input
    }
    }
    else{
    return input;
    }
    }
    });
    <div>
    <span>输入文本:</span> <input type="text" ng-model="order" />
    <span>倒序输出:</span> <input type="text" value="{{order | desc:1}}"/>
    </div>
    8.angularJS的重复注入(使用ng-repeat)
    <tr ng-repeat="user in users">
    <td>{{user.t_id}}</td>
    <td>{{user.t_name}}</td>
    <td>{{user.t_sex}}</td>
    <td>{{user.t_adr}}</td>
    ......
    </tr>
    9.angularJs的ajax使用
    $scope.add= function(){
    if($scope.name && $scope.address && $scope.sex){
    $http.post("/addUser",{"name":$scope.name,"address":$scope.address,"sex":$scope.sex}).success(function(data){
    hideModal();
    var page=$scope.curPage;
    $scope.showAll(page,0);
    }).error(function(error){
    console.log(error);
    });
    }
    };
    注意:使用ajax必须在controller的函数中加入$http模块;

  • 相关阅读:
    复制功能的实现
    SDWebImage从缓存中获取图片
    修改屏幕亮度
    使用系统的CoreLocation定位
    button设置边宽和圆角
    在日期选择轮中选择的时间转换成年龄
    字符串与数组互转
    使用ASI传递post表单..参数是数组
    点击头像单独把图片拉取出来.然后再次点击回到初始效果
    Xcode svn import项目 上传.a文件(静态库)
  • 原文地址:https://www.cnblogs.com/hym881013/p/4564749.html
Copyright © 2011-2022 走看看