Angular 就是好用!!


Demo1 数据绑定 Data Binding

Hello {{yourName}}!

    <label>Name:</label>
    <input type="text" ng-model="yourName" placeholder="Enter a name here">

    <h3>Hello {{yourName} }!</h2>
                


Demo2 易用的表单验证 Form

不能为空 不能少于3位
校验成功: {{loginform.username.$valid }} 是否出错: {{loginform.username.$error }}
邮箱格式不对
<form class="form-horizontal" name="loginform">

    <div class="control-group " ng-class="{error:loginform.username.$error.required, error:loginform.username.$error.minlength, success:loginform.username.$valid}">
        <label class="control-label" >Username</label>
        <div class="controls">
            <input type="text" name="username"  ng-model="user.name" required ng-minlength="3">
            <br>
            <span class="help-inline" ng-show="loginform.username.$error.required">不能为空</span>
            <span class="help-inline" ng-show="loginform.username.$error.minlength">不能少于3位</span>
            <br>
            <span class="help-inline">校验成功:{{loginform.username.$valid } }</span>
            <span class="help-inline">是否错误: {{loginform.username.$error } }</span>
        </div>
    </div>

    <div class="control-group" ng-class="{error:loginform.useremail.$error.email, success:loginform.useremail.$valid}">
        <label class="control-label" >Email</label>
        <div class="controls">
            <input type="email" placeholder="Email"  name="useremail" ng-model="user.email" required>
            <span class="help-inline" ng-show="loginform.useremail.$error.email">邮箱格式不对</span>
        </div>
    </div>

    <div class="control-group">
        <div class="controls">
            <button type="submit" class="btn" >提交</button>
        </div>
    </div>

</form>
            



Demo3 自定义指令(组件) Directives

使用自定义的组件
    <div class="span4">
        <div menu-gdg></div>
        <menu-gdg></menu-gdg>
        <div menu-gdg></div>
        <div menu-gdg></div>
    </div>
                
定义自定义组件 “menuGdg”
angular.module('myapp', []).directive('menuGdg', function () {
    return {
        restrict: 'EA',
        templateUrl: 'tpl_slide.html',
        scope: { },
        link: function (scope, element, attrs) {
            scope.menus = [ '首页', '第一天', '第二天' ];
            scope.currentmenu = 0; 
            scope.clickmenu = function (indexid){
                scope.currentmenu = indexid;
            }
        }
    }
})
                
“menuGdg”组件模板文件 “tpl_slide.html”
<ul class="nav nav-tabs">
    <li ng-repeat ="menu in menus" ng-class ="{active:$index==currentmenu}" >
        <a href="" ng-click="clickmenu($index)">{{menu} }</a>
    </li>
</ul>
                

By : jinwyp 微博: weibo.com/jinwyp