AngualrJS常用指令的使用

最新推荐文章于 2019-07-02 23:42:59 发布

u013063153

最新推荐文章于 2019-07-02 23:42:59 发布

阅读量452

点赞数

分类专栏： Angular

本文链接：https://blog.csdn.net/u013063153/article/details/52458863

版权

Angular 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

常用指令：ng-bind,ng-model,ng-show/hide,ng-if,ng-submit,ng-disabled

ng-checked,ng-src,ng-href,ng-class,ng-selected,ng-change

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS</title>

    <link rel="stylesheet" href="css/foundation.min.css">
    <style type="text/css">
        .tx {
            width: 50px;
            height: 50px;
            margin-bottom: 10px;
            magin-left: 80px;
        }
    </style>
</head>
<body style="padding:10px;" ng-app="app">
<div ng-controller="UserCtrl">
    <form name="f" ng-submit="reqister(user)">
        <fieldset>
            <legend>基本信息</legend>
            <img ng-src="{{user.icon}}" alt="" ng-class="{'tx':user.showicon}" ng-show="user.isShowImg">
            <div>
                <input type="text" ng-model="user.uname" placeholder="用户名" required>
                <input type="password" placeholder="密码">
                职位：<select>
                <option value="">--请选择--</option>
                <option value="1" ng-selected="user.zw == '1'">JAVA工程师</option>
                <option value="2" ng-selected="user.zw == '2'">.NET工程师</option>
            </select>
                性别：
                <input type="radio"
                       ng-checked="user.sex == '1'"
                       name="sex">&nbsp;男&nbsp;
                <input type="radio"
                       ng-checked="user.sex == '0'"
                       name="sex">&nbsp;女&nbsp;
            </div>
        </fieldset>
        <fieldset>
            <legend>爱好</legend>
            <div>
                <input type="checkbox"
                       ng-checked="isChecked(1)"
                       name="ai">&nbsp;篮球&nbsp;
                <input type="checkbox"
                       ng-checked="isChecked(2)"
                       name="ai">&nbsp;足球&nbsp;
                <input type="checkbox"
                       ng-checked="isChecked(3)"
                       name="ai">&nbsp;排球&nbsp;
            </div>
        </fieldset>
        <button type="submit" class="button expand"
                ng-disabled="f.$invalid"
        >提交</button>
    </form>
</div>
</body>
<script src="js/angular.min.js"></script>
<script src="app.js"></script>
</html>

//ng-bind {{}}, ng-model,ng-show/hide,ng-if,
//ng-checked,ng-src,ng-href,ng-class,ng-selected,ng-submit,ng-change
angular.module('app',[])
.controller('UserCtrl',function ($scope) {
    $scope.user = {
        isShowImg:true,
        showicon:true,
        icon:'image/logo.jpg',
        uname:'',
        pwd:'',
        zw:'1',
        sex:'1',
        aihao:[1,2,3]
    };
    $scope.isChecked = function (n) {
        var isok = false;
        for(var i = 0; i < $scope.user.aihao.length; i++){
            if(n == $scope.user.aihao[i]){
                isok = true;
                break;
            }
        }
        return isok;
    }
    $scope.reqister = function (u) {
        console.log(u);
    }
})

运行效果：

u013063153

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngualrJS常用指令的使用

常用指令：ng-bind,ng-model,ng-show/hide,ng-if,ng-submit,ng-disabledng-checked,ng-src,ng-href,ng-class,ng-selected,ng-changehtml>html lang="en">head> meta charset="UTF-8"> title>AngularJStit
复制链接

扫一扫