zoukankan      html  css  js  c++  java
  • angular具体用法及代码

    1.templateUrl:'abc',

    用这种方法时:

    <script type="text/ng-template" id="abc">
        <div>
          <h1>标题</h1>
          <p>放置内容的</p>
        </div>
    </script>

    2.用scope这种时

    scope:{
      myStr:'@',//传递一个字符串作为属性的值
      myAttr:'=',//绑定父作用域中的一个属性,在指令中调用
      myFun:'&'//绑定父作用域中的一个函数,在指令中调用
    },

    <div my-tag my-str="lilei" my-attr="txt" my-fun="abc()"></div>

    app.directive('myTag',function (){
      return {
        restrict:'AC',
        replace:false,
           scope:{
              myStr:'@',//传递一个字符串作为属性的值
              myAttr:'=',//绑定父作用域中的一个属性,在指令中调用
              myFun:'&'//绑定父作用域中的一个函数,在指令中调用
    },

    template:'<div><h3>我名字叫:{{myStr}}</h3><h3>{{myAttr}}</h3><button ng-click="def()">点击我</button></div>'
    }
    });

    3.link

    link:function (scope,element,attr,controller){//指令逻辑代码区域
        element.on('click','button',function (){
          element.find('span').css('color','red');
        });
    },
    template:'<div><h3>我名字叫:{{myStr}}</h3><h3>{{myAttr}}</h3><button>点击我</button><span>被控制元素</span></div>'
    }

    4.过滤器

    <div ng-controller="myCtrl">
      <h1>{{name | uppercase}}</h1>
      <h1>{{name | lowercase}}</h1>
      <h1>苹果7价格是:{{jg | currency:'¥'}}</h1>
    </div>

    5.filter

    <body ng-app="myApp">
      <div ng-controller="myCtrl">
        <input type="text" value="" ng-model="str">
        <ul>
          <li ng-repeat="per in data | filter:str">
              <span>姓名:{{per.name}}</span>
              <span>性别:{{per.sex}}</span>
              <span>年龄:{{per.age}}</span>
          </li>
        </ul>
    </div>
    <script>
      var app=angular.module('myApp',[]);
      app.controller('myCtrl',function ($scope){
          $scope.str='';
          $scope.data=[
                            {'name':'lilei','sex':'男','age':24},
                            {'name':'lily','sex':'女','age':22},
                            {'name':'lucy','sex':'女','age':28},
                            {'name':'jack','sex':'男','age':21},
                            {'name':'lilei','sex':'男','age':20},
                            {'name':'lily','sex':'女','age':31},
                            {'name':'lucy','sex':'女','age':35},
                            {'name':'jack','sex':'男','age':18}
                 ];
    })
    </script>
    </body>

    6.自定义filter

    <body ng-app="myApp">

      <div class="box" ng-controller="myctrl">
        <div class="head">
          <span>编号</span>
          <span>姓名</span>
          <span>性别</span>
          <span>年龄</span>
        </div>
        <ul class="list">
          <li ng-repeat="x in data | myfilter:0" ng-class-odd="'odd'" ng-class-  even="'even'">
            <span>{{$index+1}}</span>
            <span>{{x.name}}</span>
            <span>{{x.sex}}</span>
            <span>{{x.age}}</span>
          </li>
        </ul>
    </div>

    <script>
    var app=angular.module('myApp',[]);
    app.controller('myctrl',['$scope',function (scope){
      scope.data=[
        {'name':'刘一','sex':'男','age':21},
        {'name':'杨二','sex':'女','age':20},
        {'name':'张三','sex':'女','age':15},
        {'name':'李四','sex':'男','age':23},
        {'name':'王五','sex':'女','age':22},
        {'name':'马六','sex':'男','age':25},
        {'name':'全七','sex':'女','age':26},
        {'name':'艾八','sex':'男','age':30},
        {'name':'赵九','sex':'女','age':31},
        {'name':'顾十','sex':'女','age':19},
        {'name':'萧11','sex':'女','age':22}
      ];
    }]);
    app.filter('myfilter',function (){
        //arr为调用过滤器时自动注入的数据data,
        //sex为调用过滤器时传过来的参数0(myfilter:0)
        return function (arr,sex){
          var _arr=[];
          var _sex=sex?'男':'女';
          for (var i = 0; i < arr.length; i++) {
            if (arr[i].sex==_sex&&arr[i].age>18&&arr[i].age<30) {
            _arr.push(arr[i]);
            };
          };
        return _arr;
      }
    });
    </script>
    </body>

  • 相关阅读:
    MVC设置默认页面
    MySQL_DBA整理
    解决git提交敏感信息(回退git版本库到某一个commit)
    并发数计算
    高并发下的 Nginx 优化与负载均衡
    PassengerNginxdebian快速部署Rails
    Linux+postfix+extmail+dovecot打造基于web页面的邮件系统
    2018.11.30软件更新公告
    2018.10.11软件更新公告
    2018.09.25软件更新公告
  • 原文地址:https://www.cnblogs.com/SunShineM/p/6020765.html
Copyright © 2011-2022 走看看