angular checkbox required

Here is the fiddle http://jsfiddle.net/lumixraku/xgLz7d4j/2/

html

<body ng-app="app">
    <div ng-controller=‘controller‘>
        <ng-form name="formName">
            <input type="text" ng-model="val1" required/>
            <div ng-show="myForm.items" ng-repeat="item in myForm.items">
                <label>
                    <input type="checkbox" name="group[]" ng-model="$parent.selectedValue[item.id]" value="{{item.id}}" ng-required="!someSelected($parent.selectedValue)" />{{item.sId}}</label>
            </div>{{selectedValue}}
            <input type="submit" ng-disabled="formName.$invalid">
                {{formName.$invalid}}
        </ng-form >
    </div>
</body>

JS

app = angular.module(‘app‘, []);

app.controller(‘controller‘, function ($scope) {
    $scope.myForm = {};
    $scope.selectedValue = {};
    $scope.myForm.items = [{
        id: 1,
        sId: "analog"
    }, {
        id: 2,
        sId: "isdn"

    }, {
        id: 3,
        sId: "dsl"
    }];
    $scope.someSelected = function (obj) {
        console.log(‘some selecgted‘);
        var rs=Object.keys(obj).some(function (key) {
            return obj[key];
        });
        console.log(rs);
        return rs;
    }
    $scope.submitForm = function(){
        $scope.clickSubmit = ‘clickSubmit‘;
    }

});
时间: 2024-11-08 19:41:06

angular checkbox required的相关文章

angular checkbox 全选和反选功能

最近做写出了angularjs 全选和反选的数据绑定功能,分享出来给大家,有什么不对的地方请大家多多指教,angularjs 强大的数据绑定功能完全展现了新一代的web 开发的,完美的和html 应用在一起,实现新一代的技术完美结合.废话就不多说了,下面看代码: 1.html 页面: <table class="table" >    <!--主机组主机列表-->    <tr style="background-color: #555555;c

转发——html用户注册界面

此文章仅为转发,非原创,原文http://www.cnblogs.com/ayu999/p/5743324.html 请支持原创 先上一张简约的界面的效果图 这里是style里面的内容 <style> input[type]{ border: 1px solid darkorange; background: white; } #button{ border: 10px solid orange; width: 200px; box-shadow:0px 4px 5px #666; backg

html用户注册界面

先上一张简约的界面的效果图 这里是style里面的内容 <style> input[type]{ border: 1px solid darkorange; background: white; } #button{ border: 10px solid orange; width: 200px; box-shadow:0px 4px 5px #666; background: orange; color: white; } </style> 再来body里面的内容,这里用到的是失

js实现登陆界面

代码分享: <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> input[type]{ border: 1px solid darkorange; background: white; } #button{ border: 10px solid or

纯CSS实现表单验证

ladies and 乡亲们,表单验证你在做吗?客户端or服务器端,javascript or jquery,动手写 or 使用插件,今天我们来探索下使用纯css实现表单验证,借以学习css selectors level 4中的表单相关的伪类选择器. 案例欣赏 代码我同样放到了codepen,大家可以在线研究,或下载收藏. 知识解析 关键在于使用css selectors levle4里的一些伪类实现表单验证,这些伪类有: :required和:optional :in-range和out-o

在ASP.NET MVC中验证checkbox 必须选中 (Validation of required checkbox in Asp.Net MVC)

转载自 http://blog.degree.no/2012/03/validation-of-required-checkbox-in-asp-net-mvc/ Why would you want to have a required checkbox, i.e. a checkbox that user would have to check? Well, a typical example would be that you have some sort of terms associa

Angular中checkbox实现复选

需求:实现点击子选项,父选项自动勾选,当子选项没有勾选,对应的父选项不勾选,并把勾选的对应的id发送出去. 效果图: <!DOCTYPE html> <html data-ng-app="App"> <head> <script src='angular-1.3.0.js'></script> <script src="script2.js"></script> </head&

angular实时显示checkbox被选中的元素

/** * Created by zh on 20/05/15. */ // Code goes here var iApp = angular.module("App", []); iApp.controller('AddStyleCtrl', function($scope) { $scope.tagcategories = [ { id: 1, name: 'Color', tags: [ { id:1, name:'color1' }, { id:2, name:'color2

angular JS中使用jquery datatable添加checkbox点击事件

'use strict'; app.controller('DataTableCtrl', function ($scope, $compile) { $scope.selected = []; $scope.isSelected = function (obj,index, id) { var checkbox = obj.target; checkbox.checked ? $scope.selected.push(id) : $scope.selected.splice(index,1);