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 ...
随机推荐
- oracle 如何重置用户密码
- js——DOM操作(一)
DOM:Document Object Model 文档对象模型 文档:html页面 文档对象:页面中元素 文档对象模型:定义 为了能够让程序(js)去操作页面中的元素 DOM会把文档看作是一棵树 ...
- CSS Hack代码与浏览兼容总结
关于CSS Hack的东西能少尽量少吧.发现这篇文章我写得太复杂了,所以重新精简了一下,把代码粘贴到jsfiddle上,方面修改代码和维护. 1, IE条件注释法,微软官方推荐的hack方式. 只在I ...
- KPI考核
编辑 本词条缺少名片图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! KPI考核,Key Performance Indicator的缩写,指的是关键绩效指标考核法. 中文名 KPI考核 外 ...
- UTF-8、UTF-16、UTF-32编码的相互转换
最近在考虑写一个可以跨平台的通用字符串类,首先需要搞定的就是编码转换问题. vs默认保存代码文件,使用的是本地code(中文即GBK,日文即Shift-JIS),也可以使用带BOM的UTF-8.gcc ...
- vagrant打造自己的开发环境
vagrant打造自己的开发环境 缘由: 在网上看到斌哥,爽神都写了关于vagrant的博客,都在说很强大,所以很好奇这玩意怎么个强大,然后也就自己来一发玩玩看看. 真实缘由: 说实话是电脑配置太低, ...
- B. Wet Shark and Bishops(思维)
B. Wet Shark and Bishops time limit per test 2 seconds memory limit per test 256 megabytes input sta ...
- mac 版本号控制工具SmartSVN7.5.4(破解版)
SmartSVN7.5.4和破解工具,下载地址:http://download.csdn.net/detail/pearlhuzhu/7407319 操作步骤: 1.在MAC上选中smartsvn-m ...
- 使用 Eclipse Memory Analyzer 进行堆转储文件分析
Eclipse Memory Analyzer(MAT)是著名的跨平台集成开发环境 Eclipse Galileo 版本的 33 个组成项目中之一,它是一个功能丰富的 JAVA 堆转储文件分析工具,可 ...
- <转>机器学习笔记之奇异值分解的几何解释与简单应用
看到的一篇比较好的关于SVD几何解释与简单应用的文章,其实是有中文译本的,但是翻译的太烂,还不如直接看英文原文的.课本上学的往往是知其然不知其所以然,希望这篇文能为所有初学svd的童鞋提供些直观的认识 ...