zoukankan      html  css  js  c++  java
  • 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);                   
                }        
            })
  • 相关阅读:
    ADC测试matlab代码
    matlab的滤波器仿真——低通滤波器与插值滤波器
    PDF转Image最终方案
    多线程和蕃茄炒蛋
    git学习总结
    踩坑了,当前目录问题
    Angular 1.x 升级到 Angular 2
    打造AngularJs2.0开发环境
    发布一个自用的ansi转utf8程序
    用itextsharp打印pdf示例
  • 原文地址:https://www.cnblogs.com/m110/p/8582304.html
Copyright © 2011-2022 走看看