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 ...
随机推荐
- dp状态压缩-铺砖问题
题目:有一个n行m列的地板,需要用 1*2小砖铺盖,小砖之间互相不能重叠,问有多少种不同的铺法? 示范: 解法:用F[i][j]存放第i行的第j状态(j为十进制,转为二进制即是状态)有多少种方案. 用 ...
- linux杂记（三）linux指令介绍
[root@linux ~]# command [-options] parameter1 parameter2 说明: 最左边的root显示的是[目前使用者的账号],而@之后接的是linux即[主机 ...
- Android API在不同版本系统上的兼容性
随着安卓版本的不断更新,新的API不断涌出,有时候高版本的API会在低版本crash的. 如果minSdkVersion设置过低,在build的时候,就会报错(Call requires API le ...
- mac apktool配置
Apktool:http://ibotpeaches.github.io/Apktool/install/ 最新版本2.0.1 dex2jar: https://github.com/pxb1988/ ...
- scss + react + webpack + es6
scss + react + webpack + es6 写在前面: 刚学习完慕课网里的一个幻灯片案例,自己加了刚学的react,两者结合.首先让大家看看效果 点击此处 你可以先用纯js实现上面的效果 ...
- SQL Server 的三种用户自定义函数
create function fun_A() #标题函数.create function fun_name() returns output_type as begin return value ...
- 20.org.hibernate.StaleStateException: Batch update returned unexpected row count from update [0]; actual row count: 0; expected: 1
org.hibernate.StaleStateException: Batch update returned unexpected row count from update [0]; actua ...
- Android 检测SD卡应用
Android 检测SD卡应用 // Environment.MEDIA_MOUNTED // sd卡在手机上正常使用状态 // ...
- javascript抽象工厂模式
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
- JY的题目（水）
JY的题目[问题背景]一天,JY觉得DZY智商太低下,决定和他离婚,除非DZY做出来她出的题目.DZY当然非常想和JY在一起,所以他只好又去请计算机大神WJC帮忙,WJC已经帮过他N多次忙了,不想再帮 ...