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';
}
});
angular checkbox required的更多相关文章
- angular checkbox
Error: ngModel:constexpr Non-Constant Expression 1.3版本 <input type="checkbox" ng-model= ...
- html用户注册界面
html用户注册界面 先上一张简约的界面的效果图 这里是style里面的内容 <style> input[type]{ border: 1px solid darkorange; ba ...
- 纯CSS实现表单验证
ladies and 乡亲们,表单验证你在做吗?客户端or服务器端,javascript or jquery,动手写 or 使用插件,今天我们来探索下使用纯css实现表单验证,借以学习css sele ...
- 购书网站前端实现（HTML+CSS+JavaScript）
购书+阅读静态网页设计与实现 一.主页设计HTML 1.效果展示及实现 2.完整代码 二.主页样式布局CSS 三.空间功能实现Javascript 主要功能 Javascript完整代码: 总结 购书 ...
- 在checkbox中使用.prop; angular中属性的值使用变量问题
1.在checkbox中使用.prop而不使用.attr ,.attr有时并不如愿的改变checkbox的打钩问题 给这个checkbox设置return false就能阻止点击则改变状态的默认行为 ...
- 在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 ...
- Angular中checkbox实现复选
需求:实现点击子选项,父选项自动勾选,当子选项没有勾选,对应的父选项不勾选,并把勾选的对应的id发送出去. 效果图: <!DOCTYPE html> <html data-ng-ap ...
- angular实时显示checkbox被选中的元素
/** * Created by zh on 20/05/15. */ // Code goes here var iApp = angular.module("App", []) ...
- [Unit Testing] Angular Test component with required
export default (ngModule) => { describe('Table Item component', () => { let $compile, directiv ...
随机推荐
- 在Linux下如何用Shell脚本读写XML？现有一个config.xml（转）
在Linux下如何用Shell脚本读写XML?现有一个config.xml <?xml version="1.0" encoding="UTF-8"?&g ...
- nginx upstream setting
upstream proxy_1 { server 127.0.0.1:8080; #连接到上游服务器的最大并发空闲keepalive长连接数(默认是未设置,建议与Tomcat Connector中的 ...
- Linux学习之more命令
more命令,功能类似 cat ,cat命令是整个文件的内容从上到下显示在屏幕上. more会以一页一页的显示方便使用者逐页阅读,而最基本的指令就是按空白键(space)就往下一页显示,按 b 键就会 ...
- js监听input等表单输入框的变化事件oninput
js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...
- 如何实现select组件的选择输入过滤作用
实现select组件的选择输入过滤作用的js代码如下: /** *其中//******之间的部分显示的是在没有选择输入过滤功能的代码上加入的功能代码 ** / (function ( $ ) { $. ...
- cookie简介
上例子 1.首先要用php创建cookie发送给客户端,利用setcookie()方法即可 <?php /* * * @Authors peng--jun * @Email 1098325951 ...
- Python 正则表达式应用【转载】
将从正则表达式开始讲Python的标准库.正则表达式是文字处理中常用的工具,而且不需要额外的系统知识或经验.我们会把系统相关的包放在后面讲解. 正则表达式(regular expression)主要功 ...
- 异构数据源海量数据交换工具-Taobao DataX 下载和使用
DataX介绍 DataX是一个在异构的数据库/文件系统之间高速交换数据的工具,实现了在任意的数据处理系统(RDBMS/Hdfs/Local filesystem)之间的数据交换. 目前成熟的数据导入 ...
- Tempo 2.0
Tempo 2.0 Tempo is an easy, intuitive JavaScript rendering engine that enables you to craft data tem ...
- mybatis.generator.configurationFile
mybatis.generator.configurationFile 有一个更好的配置方法,可以不用在generateConfig.xml里面写死驱动的地址:如果你的mybatis连接也是在pom. ...