1. 程式人生 > >angularjs中的複選框checkbox

angularjs中的複選框checkbox

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="">
    <p>My cars:</p>
    <input type="checkbox" ng-model="all"> Check all<br><br>
    <input type="checkbox" ng-checked="all">Volvo<br>
    <input type="checkbox" ng-checked="all">Ford<br>
    <input type="checkbox" ng-checked="all">Mercedes
    <p>點選 "Check all" 選擇所有的車。</p>
</body>

</html>


當點選Check all按鈕時,ng-model="all"中繫結的all的值變為為true,相應的ng-checked=“all中的all值也都變為true,即其他按鈕都被選中。

另外一例子:

html程式碼:

<div class="form-control">

<input type="checkbox" ng-model="aaa"  value="某一值">寶馬</input>

<input type="checkbox" ng-model="bbb"  value="另外一值">奧利奧</input>

</div>

//checkbox 選中時返回值只為true或 false,如果選中“”“寶馬”則&scope.aaa=true。 其中不管上述“寶馬”或“奧利奧”兩個複選框選中沒選中,其value值永遠為“某一值”或“另外一值”

div class="form-control">

<input type="radio" ng-model="aaa"  value="某一值">寶馬</input>

<input type="radio" ng-model="aaa"  value="另外一值">奧利奧</input>

</div>

//radio選中時返回的值為其所對應的屬性value所返回的值,如果選中“寶馬”則在$scope.aaa的值為“某一值”。

控制器中的程式碼為:

$scope.aaa="某一值"


相關推薦

獲取ListControl控制元件()CheckBox的狀態

轉載:http://blog.chinaunix.net/uid-20680966-id-1896376.html 推薦:簡單明瞭的例子,適合入門,剩下的就是自由發揮了。 注:LVN_ITEMCHANGED 某個項已經發生變化。 如果使用VS2010或更高版本,字元一般預設Unicod

關於PHPCheckBox的資料庫存取使用方法總結

本文基於PHP7.0與mysql資料庫5.5版本,主要闡述表單中的CheckBox多選按鈕對於資料庫的儲存以及提取顯示的一些方法的總結。 1. 表單中直接提取顯示: eg: <input typ

angularjscheckbox

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js

Axure RP Pro 相關問題 checkbox部件的OnClick事件的狀態已發生了改變

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

【Winform】【Devxepress】關於獲取Gridviewcheckbox)狀態改變問題

點選gridview中checkbox會觸發的事件(之一 private void gridView1_RowCellClick(object sender, RowCellClickEventArgs

angularJscheckbox選中進行ng-show顯示隱藏

ng-true-value="1" //代表選中的時候,值為1 ng-false-value="0" //代表未選中的時候,值為0 <!doctype html> <html lan

自己寫一個序列化form表單,表單checkbox,單radio等

form表單中有複選框,單選框等var serializeform = function (formid) {    var form = document.getElementById(formid);    var arr = {};    for (var i = 0;

後臺獲取jscheckbox批量刪除

<head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <link href="/common/css/css.css" rel="stylesheet" type="text/c

checkbox獲取值

判斷是否有選擇值:  var count = 0;     $("input[name=subBox]:checkbox:checked").each(function () {         count++;  

jquery實現checkbox 取消全

                jsp中checkbox複選框的個數是依據從資料庫中取出值的條數決定的,是Iterator迴圈遍歷出來的。<td class="rd8"><input type="checkbox" name="selectFlag" id="selectFlag" valu

jquery實現checkbox,取消全

jsp中checkbox複選框的個數是依據從資料庫中取出值的條數決定的,是Iterator迴圈遍歷出來的。 <td class="rd8"> <input type="checkbox" name="selectFlag" id="selectFlag" value="<%=

checkbox 獲取已選中的值

var spCodesTemp = "";   $('input:checkbox[name=tableCKboxOne]:checked').each(function(i){   if(0==i){   spCodesTemp = $(this).val();   }e

layui 不居中的問題

layui 複選框向上偏移   加上下面一段程式碼就可以   <style>        .layui-table-cell .layui-form-checkbox[lay-skin="primar

jQuery操作checkbox技巧總結 ---- 設定選中、取消選中、獲取被選中的值、判斷是否中等

jQuery操作複選框checkbox技巧總結 --- 設定選中、取消選中、獲取被選中的值、判斷是否選中等 一、checked屬性定義 先了解下input標籤的checked屬性: 1、HT

jquery對(checkbox)的操作彙總

query操作複選框(checkbox)的12個小技巧。 1、獲取單個checkbox選中項(三種寫法) ? 1 $("input:checkbox:checked").val()

使用CSS3美化checkbox

方法一 :使用圖片 .checkbox { display: none; } .checkbox-i{ margin-right: 20px; background-image: url("../img/icon.png"); background-repeat: no-

使用easyui框架form控制元件,單按鈕radio或checkbox樣式問題

easyui只提供了textbox文字框,未提供單選按鈕radio或複選框checkbox控制元件,在使用過程中,會存在單選按鈕radio或複選框checkbox與文字框textbox樣式不統一的問題,要保證其樣式的統一性,可以通過如下程式碼實現: for

Jquery操作(CheckBox)的取值賦值實現程式碼

賦值 複選框 CheckBox 遍歷 取值 1. 獲取單個checkbox選中項(三種寫法): $("input:checkbox:checked").val() 或者 $("input:[type='checkbox']:checked").val(); 或者 $("inp

Python+Selenium練習篇之17-點-Checkbox

本文介紹Selenium中,如何操作複選 框-Checkbox,最終的方法還是click()。 本來想還是繼續採用for語句來把所有的複選框勾選一遍,例如這樣的場景:註冊一個網站勾選身份或者職業的時候

JQuery之checkbox基本操作

利用JQuery實現複選框的基本操作,例如全選、全部選、獲取選中值、獲取未選中值、獲取選中長度等操作。 下面直接看例子,例子中有詳細的介紹了JQuery是如何實現這些功能的。 在使用JQuery之前要先匯入JQuery的相關檔案,我這裡引入的是jquery-1.8.0.mi