AngularJS單選框及多選框實現雙向動態綁定_AngularJS
在AngularJS中提及雙向資料綁定，大家一定會想到ng-model指令。
一、ng-model
ng-model指令用來將input、select、textarea或自訂表單控制項同包含它們的作用域中的屬性進行綁定。它將目前作用域中運算表達式的值同給定的元素綁定。如果屬性不存在，它會隱式建立並將其新增至目前作用域。
總是用ng-model來綁定scope上一個資料模型內的屬性，而不是scope上的屬性，這可以避免在作用域或後代作用域中發生屬性覆蓋！
<input type="text" ng-model="modelName.somePrototype" />
二、type=”radio”
透過 value 屬性指定選取狀態下對應的值，並透過 ng-model 將單選框與 $scope 中的屬性對應，便實現了 type=”radio” 時的雙向動態綁定。
<input type="radio" name="sex" value="male" ng-model="person.sex" />男 <input type="radio" name="sex" value="female" ng-model="person.sex" />女
三、type=”checkbox”
透過AngularJS 的內建指令ng-true-value 和ng-false-value ，指定多重選取框在選取和未選取狀態下對應的值，再透過ng-model 將其與$scope 中的屬性對應，便實現了type=”checkbox” 的雙向動態綁定。
<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.pingpong" />乒乓球 <input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.football" />足球 <input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.basketball" />篮球
四、完整範例
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>radio & checkbox</title>
<script type="text/javascript" src="angular.js/1.4.4/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="true" ng-false-value="false" ng-model="person.like.pingpong" />乒乓球
<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.football" />足球
<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.basketball" />篮球
<span>{{ person.like.pingpong }} {{ person.like.football }} {{ person.like.basketball }} </span>
</body>
</html>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.run(function($rootScope) {
$rootScope.person = {
sex: "female",
like: {
pingpong: true,
football: true,
basketball: false
}
};
});
</script>
以上就是關於AngularJS單選框及多選框實現雙向動態綁定的相關介紹，希望對大家的學習有所幫助。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Vue中如何進行表單資料的動態綁定和更新
Oct 15, 2023 pm 02:24 PM
Vue中如何進行表單資料的動態綁定和更新隨著前端開發的不斷發展，表單是我們經常使用到的一種互動元素。在Vue中，表單的動態綁定和更新是一個常見的需求。本文將介紹Vue中如何進行表單資料的動態綁定和更新，並提供具體的程式碼範例。一、表單資料的動態綁定Vue提供了v-model指令來實現表單資料的雙向綁定。透過v-model指令，我們可以將表單元素的值與Vue實例
Vue文件中的多選框勾選與全選函數的關係
Jun 21, 2023 am 09:33 AM
隨著前端技術的不斷發展與進步，Vue框架的應用也越來越普及。在Vue的實際應用中，常常會用到多選框勾選和全選的功能。而在Vue文件中，多選框勾選和全選的實作方法也是非常詳細的。 Vue中的多重選取框在Vue中，多重選取框的實作方法非常簡單，只需要在需要使用多重選取框的地方使用<inputtype="checkbox">即可。當需要選取多個選
如何使用Vue實作多選框和單選框
Nov 07, 2023 am 11:42 AM
如何使用Vue實作多選框和單選框Vue是一款流行的JavaScript框架，廣泛應用於Web開發中。在Vue中，我們可以很方便地實現各種互動效果，包括多選框和單選框。本文將介紹如何使用Vue實作多選框和單選框，並提供具體的程式碼範例。實現多選框多選框用於允許使用者選擇多個選項。在Vue中，我們可以利用v-model指令來實現多選框的雙向資料綁定。下面是一個簡單的例
2022年最新5款的angularjs教學從入門到精通
Jun 15, 2017 pm 05:50 PM
Javascript 是一個非常有個性的語言. 無論是從程式碼的組織, 還是程式碼的程式設計範式, 或物件導向理論都獨具一格. 而很早就在爭論的Javascript 是不是物件導向語言這個問題, 顯然已有答案. 但是, 即使Javascript 叱吒風雲二十年, 如果想要看懂jQuery, Angularjs, 甚至是React 等流行框架, 觀看《黑馬雲課堂JavaScript 高級框架設計視頻教程》就對了。
使用PHP和AngularJS建立響應式網站，提供優質的使用者體驗
Jun 27, 2023 pm 07:37 PM
在現今資訊時代，網站已成為人們獲取資訊和交流的重要工具。一個響應式的網站能夠適應各種設備，為使用者提供優質的體驗，成為了現代網站開發的熱點。本篇文章將介紹如何使用PHP和AngularJS建立響應式網站，進而提供優質的使用者體驗。 PHP介紹PHP是一種開源的伺服器端程式語言，非常適合Web開發。 PHP具有許多優點，如易於學習、跨平台、豐富的工具庫、開發效
使用PHP和AngularJS建立Web應用
May 27, 2023 pm 08:10 PM
隨著網路的不斷發展，Web應用已成為企業資訊化建設的重要組成部分，也是現代化工作的必要手段。為了讓Web應用能夠方便開發、維護和擴展，開發人員需要選擇適合自己開發需求的技術框架和程式語言。 PHP和AngularJS是兩種非常流行的Web開發技術，它們分別是伺服器端和客戶端的解決方案，透過結合使用可以大大提高Web應用的開發效率和使用體驗。 PHP的優勢PHP
多選框全選功能在Vue開發中的解決方法
Jun 30, 2023 pm 02:00 PM
Vue開發中如何解決多選框的全選功能問題在Vue開發中，經常會遇到需要使用多選框來進行批量操作的場景，而有時我們還需要實現一個全選功能，即全選多選框選中時，所有的子選項也要被選中。本文將介紹如何使用Vue來解決多選框的全選功能問題。準備工作首先，在Vue開發中，我們需要使用到Vue的計算屬性和事件綁定。在Vue元件中，定義一個data屬性，用來儲存多選框的選
使用Flask和AngularJS建立單頁Web應用程式
Jun 17, 2023 am 08:49 AM
隨著Web技術的快速發展，單頁Web應用程式（SinglePageApplication,SPA）已成為越來越流行的Web應用程式模型。相較於傳統的多頁Web應用程序，SPA的最大優勢在於使用者感受更加流暢，同時伺服器端的運算壓力也大幅減少。在本文中，我們將介紹如何使用Flask和AngularJS來建構一個簡單的SPA。 Flask是一款輕量級的Py
