zoukankan      html  css  js  c++  java
  • 【js类库AngularJs】学习angularJs的指令(包括常见表单验证,隐藏等功能)

    【js类库AngularJs】学习angularJs的指令(包括常见表单验证,隐藏等功能)

    AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的 是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入、等等。

    参考资料:

    angularjs中文网:http://www.apjs.net/

    angularjs官网:http://angularjs.org

    api参考:http://docs.angularjs.cn/api/ng/directive/form

    (之所以列出如上这些链接,是因为本人在学习各类语言的过程中,发现入门以后,通过看官方文档,反倒会学习的更快,更准确,更系统。)

    从jquery转向angularJs这种双向绑定的js框架时,最让人担忧的是原来处理dom的方式在使用angularJs后,应该怎么适应呢?

    本文列出了比较常见的几种处理,包括表单验证,动态设置元素样式,设置元素显示隐藏等功能。

    1. input[checkbox]双选框

    使用方法:

    <input type="checkbox"
           ng-model=""
           [name=""]
           [ng-true-value=""]
           [ng-false-value=""]
           [ng-change=""]>

    使用实例:

    <form name="myForm" ng-controller="ExampleController">
          Value1: <input type="checkbox" ng-model="value1"> <br/>
          Value2: <input type="checkbox" ng-model="value2"
                         ng-true-value="'YES'" ng-false-value="'NO'"> <br/>
          <tt>value1 = {{value1}}</tt><br/>
          <tt>value2 = {{value2}}</tt><br/>
         </form>

    js代码:

     var app = angular.module('formExample', []);
      app.controller('ExampleController', ['$scope', function($scope) {
          console.log('...');
          $scope.value1 = true;
          $scope.value2 = 'YES'
        }]); 

    页面效果图:

    2.input[date]时间选择器

    使用方法:

    <input type="date"
           ng-model=""
           [name=""]
           [min=""]
           [max=""]
           [required=""]
           [ng-required=""]
           [ng-change=""]>

    使用实例:

    <form name="dateForm" ng-controller="DateController">
           Pick a date in 2015:
           <input type="date" id="exampleInput" name="input" ng-model="value"
               placeholder="yyyy-MM-dd" min="2015-01-01" max="2015-12-31" required />
           <span class="error" ng-show="dateForm.input.$error.required">
               Required!</span>
           <span class="error" ng-show="dateForm.input.$error.date">
               Not a valid date!</span>
            <tt>value = {{value}}</tt><br/>
            <tt>value = {{value | date: "yyyy-MM-dd"}}</tt><br/>
            <tt>dateForm.input.$valid = {{dateForm.input.$valid}}</tt><br/>
            <tt>dateForm.input.$error = {{dateForm.input.$error}}</tt><br/>
            <tt>dateForm.$valid = {{dateForm.$valid}}</tt><br/>
            <tt>dateForm.$error.required = {{!!dateForm.$error.required}}</tt><br/>
        </form>

    js代码:

    function DateController($scope){
        $scope.value = new Date(2015, 9, 22);
      }

    效果图:

    3.ng-class 使用angularJs动态设置、更改dom元素的css样式。

    css样式:

    .strike {
      text-decoration: line-through;
    }
    .bold {
        font-weight: bold;
    }
    .red {
        color: red;
    }

    html代码:

        <p ng-class="{strike: deleted, bold: important, red: error}">Map Syntax Example</p>
        <input type="checkbox" ng-model="deleted"> deleted (apply "strike" class)<br>
        <input type="checkbox" ng-model="important"> important (apply "bold" class)<br>
        <input type="checkbox" ng-model="error"> error (apply "red" class)
        <hr>
        <p ng-class="style">Using String Syntax</p>
        <input type="text" ng-model="style" placeholder="Type: bold strike red">
        <hr>
        <p ng-class="[style1, style2, style3]">Using Array Syntax</p>
        <input ng-model="style1" placeholder="Type: bold, strike or red"><br>
        <input ng-model="style2" placeholder="Type: bold, strike or red"><br>
        <input ng-model="style3" placeholder="Type: bold, strike or red"><br>

    效果图:

    4.ng-class-odd/even 分别定义奇数偶数元素的css样式

    css样式:

    .odd {
      color: red;
    }
    .even {
      color: blue;
    }

    html代码:

        <ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
          <li ng-repeat="name in names">
           <span ng-class-odd="'odd'" ng-class-even="'even'">
             {{name}} &nbsp; &nbsp; &nbsp;
           </span>
          </li>
        </ol>    

    效果图:

    5.ng-click 单击事件

        <button ng-click="count = count + 1" ng-init="count=0">
          Increment
        </button>
        <span>
          count: {{count}}
        </span>

    6.ng-show/hide 是否显示,或隐藏。angularJs根据这两个属性的值,对相应元素增加.ng-hide的样式

    css样式:

    .ng-hide {
      line-height: 0;
      opacity: 0;
      padding: 0 10px;
    }

    html代码:

        <span>Click me: </span><input type="checkbox" ng-model="checked"><br/>
        <div>
          Show:
          <div style="background-color:#ccc" ng-show="checked">
            <span> I show up when your checkbox is checked.</span>
          </div>
        </div>
        <div>
          Hide:
          <div style="background-color:#258be3;color:white" ng-hide="checked">
            <span> I hide when your checkbox is checked.</span>
          </div>
        </div>

    最后,全部代码如下,单页test.html:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>angularJs directive(指令)</title>
    <style>
    body{font:12px/1.5 tahoma,arial,'Hiragino Sans GB',5b8b4f53,sans-serif}
    .strike {
      text-decoration: line-through;
    }
    .bold {
        font-weight: bold;
    }
    .red {
        color: red;
    }
    .odd {
      color: red;
    }
    .even {
      color: blue;
    }
    .ng-hide {
      line-height: 0;
      opacity: 0;
      padding: 0 10px;
    }
    </style>
    <script src="//cdn.bootcss.com/angular.js/1.2.19/angular.js"></script>
    </head>
    <body ng-app="formExample">
    
    <h2>AngularJS Sample Application</h2>
    <div>
        <h3>input[checkbox]</h3>
        <form name="myForm" ng-controller="ExampleController">
          Value1: <input type="checkbox" ng-model="value1"> <br/>
          Value2: <input type="checkbox" ng-model="value2"
                         ng-true-value="'YES'" ng-false-value="'NO'"> <br/>
          <tt>value1 = {{value1}}</tt><br/>
          <tt>value2 = {{value2}}</tt><br/>
         </form>
    </div>
    
    <div>
        <hr>
        <h3>input[date]</h3>
        <form name="dateForm" ng-controller="DateController">
           Pick a date in 2015:
           <input type="date" id="exampleInput" name="input" ng-model="value"
               placeholder="yyyy-MM-dd" min="2015-01-01" max="2015-12-31" required />
           <span class="error" ng-show="dateForm.input.$error.required">
               Required!</span>
           <span class="error" ng-show="dateForm.input.$error.date">
               Not a valid date!</span>
            <tt>value = {{value}}</tt><br/>
            <tt>value = {{value | date: "yyyy-MM-dd"}}</tt><br/>
            <tt>dateForm.input.$valid = {{dateForm.input.$valid}}</tt><br/>
            <tt>dateForm.input.$error = {{dateForm.input.$error}}</tt><br/>
            <tt>dateForm.$valid = {{dateForm.$valid}}</tt><br/>
            <tt>dateForm.$error.required = {{!!dateForm.$error.required}}</tt><br/>
        </form>
    </div>
    <script>
      var app = angular.module('formExample', []);
      app.controller('ExampleController', ['$scope', function($scope) {
          console.log('...');
          $scope.value1 = true;
          $scope.value2 = 'YES'
        }]); 
      
      /* app.controller('DateController', ['$scope', function($scope) {
        $scope.value = new Date(2015, 9, 22);
        console.log($scope.value);
      }]);*/
      //上下两种写法都可以
      function DateController($scope){
        $scope.value = new Date(2015, 9, 22);
      }
    </script>
    <div>
        <hr>
        <h3>ng-class</h3>
        <p ng-class="{strike: deleted, bold: important, red: error}">Map Syntax Example</p>
        <input type="checkbox" ng-model="deleted"> deleted (apply "strike" class)<br>
        <input type="checkbox" ng-model="important"> important (apply "bold" class)<br>
        <input type="checkbox" ng-model="error"> error (apply "red" class)
        <hr>
        <p ng-class="style">Using String Syntax</p>
        <input type="text" ng-model="style" placeholder="Type: bold strike red">
        <hr>
        <p ng-class="[style1, style2, style3]">Using Array Syntax</p>
        <input ng-model="style1" placeholder="Type: bold, strike or red"><br>
        <input ng-model="style2" placeholder="Type: bold, strike or red"><br>
        <input ng-model="style3" placeholder="Type: bold, strike or red"><br>
    </div>
    <div>
        <hr>
        <h3>ng-class-odd/even</h3>
        <ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
          <li ng-repeat="name in names">
           <span ng-class-odd="'odd'" ng-class-even="'even'">
             {{name}} &nbsp; &nbsp; &nbsp;
           </span>
          </li>
        </ol>
    </div>
    <div><hr>
        <h3>ng-click</h3>
        <button ng-click="count = count + 1" ng-init="count=0">
          Increment
        </button>
        <span>
          count: {{count}}
        </span>
    </div>
    <div><hr>
        <h3>ng-show/hide</h3>
        <span>Click me: </span><input type="checkbox" ng-model="checked"><br/>
        <div>
          Show:
          <div style="background-color:#ccc" ng-show="checked">
            <span> I show up when your checkbox is checked.</span>
          </div>
        </div>
        <div>
          Hide:
          <div style="background-color:#258be3;color:white" ng-hide="checked">
            <span> I hide when your checkbox is checked.</span>
          </div>
        </div>
    </div>
    <br/>
    </body>
    </html>
    View Code

    目前我了解到,有不少人使用Angular+ionic开发html5版本的app。
    更多细节可以参考网站http://www.ionic.wang/start-index.html

    另外,还有免费教程: http://www.ionic.wang/course-index.html


    推荐的网站:
    http://docs.angularjs.cn/api/ (api文档)
    http://showcase.ngnice.com/#/home/home (常用实例)
    http://docs.ngnice.com/guide/expression (开发文档)

  • 相关阅读:
    redis相关问题
    redis的持久化功能
    redis运维常用的server端命令
    Redis运维时需要注意的参数
    redis模拟消息订阅
    redis设置密码
    redis简单的事务
    Redis的配置文件详解
    Linux中安装redis的phpredis扩展
    css动画属性--小球移动
  • 原文地址:https://www.cnblogs.com/jinhuazhe2013/p/5036192.html
Copyright © 2011-2022 走看看