2. 程式人生 > >AngularJS中單選按鈕和多選框的動態繫結

AngularJS中單選按鈕和多選框的動態繫結

阿新 • • 發佈：2019-01-04

AngularJS中的單選按鈕的動態繫結十分簡單，寫法如下：

<input type="radio" name="sex" value="man" ng-model="sex">男
<input type="radio" name="sex" value="women" ng-model="sex">女

比如，我們想預設選中性別男的單選按鈕，我們只需要在scope中給sex賦值為man，即$scope.sex = "man"就行。也就是說我們繫結的模型的值，只需要和value的值相同時，這個單選按鈕就會被選中。
現在，你應該知道怎麼選中性別nv的按鈕了吧，我們只需要令$scope.sex="women"

即可。

AngularJS中多選框的動態繫結

多選框的動態繫結也是十分的簡單，我們只需要明白下面的道理：
1、多選框的動態繫結中必須要用到的三個指令：
- ng-true-value
多選框選中時得到的值
- ng-false-value
多選框未選中時得到的值
- ng-model
和多選框的值繫結的作用域的變數
下面再看一個例子，你就能明白了：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title
 
>radio & checkbox</title>
    <script type="text/javascript" src="../js/angular.min.js"></script>
</head>
<body>
<input type="radio" name="sex" value="male" ng-model="person.sex" />男
<input type="radio" name="sex" value="female" ng-model="person.sex" />女
<input
 
 type="text" ng-model="person.sex" />

<input type="checkbox" ng-true-value="'pingpang'" ng-false-value="false" ng-model="person.like.pingpang" />乒乓球
<input type="checkbox" ng-true-value="'football'" ng-false-value="false" ng-model="person.like.football" />足球
<input type="checkbox" ng-true-value="'basketball'" ng-false-value="false" ng-model="person.like.basketball" />籃球
<span>{{ person.like.pingpang }}{{ person.like.football }}{{ person.like.basketball }} </span>
</body>
</html>

<script type="text/javascript">
  var app = angular.module('myApp', []);

</script>

在這個例子中，我們勾選“乒乓球”時，會輸出”pingpang”，取消勾選時會輸出”false”。籃球和足球呈現相同的效果。
下面，還有一個思考題，如果你能想明白，說明你多選繫結你已經完全理解了。
多選有選中和非選中狀態，剛進頁面的是非選中轉檯，為什麼不輸出”false”呢？（哈哈，初學者，一不小心就會被帶到溝裡哦！）

相關推薦

AngularJS中單選按鈕和多選框的動態繫結

AngularJS中的單選按鈕的動態繫結十分簡單，寫法如下： <input type="radio" name="sex" value="man" ng-model="sex">男 <input type="radio" name="se

jsp+servlet對於單選按鈕和復選框取值並且存放到數據庫中

cat finall str connect put exce char exc @override index.jsp <form action="index.gj?method=toradio" method="post"> <div align=

Android中的 單選按鈕和複選框

在Adnroid中，單選按鈕和複選框都繼承了普通按鈕。因此它們都可以使用普通按鈕支援的各種屬性和方法。不同的是，它們提供了可以選中的功能，下面是對單選按鈕的和複選框的進行詳細的介紹。 在Andro

【iOS】UITbableView中cell的單選狀態和多選狀態

在之前的一篇《【iOS】UITableView中section的展開和收起》我們介紹了UITableView中section的展開和收起。當時的處理思路是給每一行的section一個狀態標記。在這一篇cell的單選也是才去的這樣一種處理思路。 思路： 1.初始的時候給每一個

MFC介面程式設計基礎（12）：組框、單選按鈕和複選框

上一篇：MFC介面程式設計基礎（11）：靜態文字框、命令按鈕和編輯框 下一篇：MFC介面程式設計基礎（13）：列表框和組合框 組框、單選按鈕和複選框都是對話方塊的常見控制元件。組框與靜態文字框一樣是CStatic類

書本例項3 單選按鈕和複選按鈕

看了題目之後我先按自己的思路實現了，我是在點選“顯示”按鍵的時候再一次性檢查控制元件的屬性，來確定ShowMessage的內容。 書本給出的程式樣例是在每次使用者點選控制元件的時候就更新一次存有message內容的變數，我想這樣應該比較浪費資源吧，不過程式很小，估計沒影響。 姓名、性別、學習成績

AngularJS中ng-options實現下拉列表的資料繫結

下拉列表的簡單使用 ng-option指令使用很簡單，只需要繫結兩個屬性： 一個是ng-model用於獲取選定的值； 另一個是ng-options用於確定下拉列表的元素陣列。 <select ng-model="engineer.currentActivit

c++之多型性(動態繫結)

多型性 指相同物件收到不同訊息或不同物件收到相同訊息時產生不同的實現動作。C++支援兩種多型性：編譯時多型性，執行時多型性。   a、編譯時多型性：通過過載函式實現    b、執行時多型性：通過虛擬函式實現  多型性可以簡單地概括為“一

Java 多型、動態繫結、向上轉型等概念的解析

Java三大基本特性 一、繼承：Java的繼承體系的特點是子類可以通過繼承父類而呼叫父類的方法（父類方法的修飾符需要為public或者protected才能被繼承），子類也可以在繼承父類方法的基礎上實現一些自己獨有的方法，也可以重寫父類的方法，這為多型的實現做了鋪墊。通過繼承可以不用去繁

Java多型之動態繫結

目錄 Java多型之動態繫結 引用變數的型別 編譯時型別 執行時型別 方法繫結 靜態繫結 動態繫結 方法表

Angularjs中單選按鈕用法總結

單選按鈕，比較常用，但是，使用時，總會出現一些問題，比如點選時，獲得不了對應的值，或者單選按鈕在頁面載入時，不能預設顯示所要選擇的項等一系列問題。下面總結一下： Html頁面： <div class="btn-group"> <label ng-r

如何在Android的ListView中構建CheckBox和RadioButton列表(支援單選和多選的投票專案示例)

引言 我們在android的APP開發中有時候會碰到提供一個選項列表供使用者選擇的需求，如在投票型別的專案中，我們提供一些主題給使用者選擇，每個主題有若干選項，使用者對這些主題的選項進行選擇，然後提交。 本文以一個支援單選和多選投票專案為例，演示了在一個ListView中如何構建CheckBox列表和Ra

Android單選和多選按鈕的使用

單項選擇RadioButton和多項選擇CheckBox的使用 前言： 在上一章我寫了關於安卓UI控制元件之Button，這一章就來講解下它的子類RadioButton和CheckBox。 在Android中，可以通過RadioButton和RadioGroup的組合來

mui開發中獲取單選按鈕、復選框的值

nbsp ++ element pretty 按鈕 選擇 return null 單選按鈕的值 js獲取單選按鈕的值 function getVals(){ var res = getRadioRes(‘rds‘); if(res == null){mui.

批量檢查單選和多選按鈕是否選中

html javscript jquery html5 在項目開發中，遇到這樣一個問題，網頁中有多組單選問題和復選項，甚至還有下拉列表或文本輸入框……除了text文本輸入框可以給它添加required屬性外之外，其他都不能用html自帶的屬性來實現必選的功能。於是從網上搜索了相關的檢測方法，大

解決關於 vue專案中 點選按鈕路由多了個問號

問題描述： 在vue專案開發過程中，點選按鈕結果頁面重新整理了一遍 後來發現路徑變成了 localhost:8080/?#/login   原因： 這裡是 form 表單，點選了button 按鈕，觸發了他的預設事件，就是觸發了提交這個行為。   解決方案 使用@click

封裝單選和多選

一、HTML <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/CheckBox_Radio.css"

jqGrid表格單選框和多選框

行單選，在載入列表的js下新增以下屬性和方法     beforeSelectRow: true,     beforeSelectRow:function(){         $("#inventory

自定義單選框和多選框

說明:作為一個Java後端程式設計師，有時候也需要自己去寫些前端程式碼，所以將工作中用到的一些小知識做記錄分享。 1.自定義單選框（有圖片） * ①先看效果圖： * ②再獻上完整程式碼： <!DOCTYPE html> <html> &l

select單選框和多選框設定預設值

在使用select單選框的時候，有時候需要配合後臺傳遞的資料設定預設值。這時候需要js來設定select單選框的預設值。 比如我們定義瞭如下的單選框 <select name="locus" id="selected" class="form-control">