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);                   
                }        
            })
  • 相关阅读:
    java 多级图的最短路径
    在dos中编译java文件
    apollo客户端的长轮询机制的原理
    Apollo配置中心动态生效实现原理
    jmx_exporter+prometheus+grafana实现kafka metric监控
    XXL-JOB(1) 分布式任务系统选型和XXL-JOB介绍,这篇文章相当的经典呀
    grafana根据不同prometheus server统计数据
    XXL-JOB的使用教程
    普罗米修斯官方文档
    Prometheus标签的管理
  • 原文地址:https://www.cnblogs.com/m110/p/8582304.html
Copyright © 2011-2022 走看看