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);                   
            }        
        })

posted on 2018-03-16 15:29 段了的弦阅读(108) 评论(0) 编辑收藏举报