• angularjs 表单


    <body ng-app="aj">
        <form id="form1" name="f" runat="server" ng-controller="user" ng-submit="sub(user)" >
            <img ng-src="{{user.head}}" ng-class="{'img':user.headbool}" /><br /><br />
            <input type="text" placeholder="用户名"  ng-model="user.name" /><br /><br />
            <input type="text" placeholder="密码" ng-model="user.pwd" required /><br /><br />
            年龄:
            <select ng-model="user.age">
                <option value="">请选择</option>
                <option ng-selected="user.age=='1'" value="1" >10</option>
                <option ng-selected="user.age=='2'" value="2" >20</option>
            </select><br /><br />
            性别:<input type="radio" ng-model="user.sex" ng-checked="user.sex=='1'" value="1" /><input type="radio" ng-model="user.sex" ng-checked="user.sex=='0'" value="0" />女<br /><br />
            爱好:<br /><br />
            <input type="checkbox" ng-checked="check(1)" value="1" ng-model="user.like" ng-true-value="1" />篮球 
            <input type="checkbox" ng-checked="check(2)" value="2" ng-model="user.like" ng-true-value="2"/>足球 
            <input type="checkbox" ng-checked="check(3)" value="3" ng-model="user.like" ng-true-value="3"/>排球 <br /><br />
            <input type="submit" value="提交" ng-disabled="f.$invalid"/>
        </form>
    </body>

    当带有  ng-disabled="f.$invalid" 时(f为form的name),input内加入required,表示这项为必填项  !!

    JS中:

    angular.module('aj', [])
            .controller('user', function ($scope) {
                $scope.user = {
                    name: "",
                    pwd:"",
                    headbool: true,
                    head:'img/4.jpg',
                    sex: '0',
                    age: '1',
                    like:[1,2,3]
                }           
                $scope.check = function (n) {
                    isok = false;
                    for (x in $scope.user.like) {
                        if ($scope.user.like[x] == n) isok = true;
                    }
                    return isok;
                }
                $scope.sub = function (u) {
                    alert(u);                   
                }        
            })
  • 相关阅读:
    葵花宝典,参考学习网站收藏
    安卓工具
    马帮
    C89:vs输出调试信息
    OSG:中级篇 拖拽器类
    OSG:幼儿园篇 第六章 碰撞检测类
    OSG:幼儿园篇 第三章 节点坐标变换类
    OSG:幼儿园篇 第五章 界面交互类
    C++11:智能指针
    OSG:幼儿园篇 第四章 节点回调类
  • 原文地址:https://www.cnblogs.com/m110/p/8582304.html
Copyright © 2020-2023  润新知