快捷導(dǎo)航

AngularJS單選框及多選框?qū)崿F(xiàn)雙向動態(tài)綁定

更新時間：2016年01月13日 16:11:07 作者：奮飛

這篇文章主要為大家詳細(xì)介紹了AngularJS單選框及多選框?qū)崿F(xiàn)雙向動態(tài)綁定的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

在AngularJS中提及雙向數(shù)據(jù)綁定，大家肯定會想到ng-model指令。

一、ng-model

ng-model指令用來將input、select、textarea或自定義表單控件同包含它們的作用域中的屬性進(jìn)行綁定。它將當(dāng)前作用域中運算表達(dá)式的值同給定的元素進(jìn)行綁定。如果屬性不存在，它會隱式創(chuàng)建并將其添加到當(dāng)前作用域中。
始終用ng-model來綁定scope上一個數(shù)據(jù)模型內(nèi)的屬性，而不是scope上的屬性，這可以避免在作用域或后代作用域中發(fā)生屬性覆蓋！

<input type="text" ng-model="modelName.somePrototype" />

二、type=”radio”

通過 value 屬性指定選中狀態(tài)下對應(yīng)的值，并通過 ng-model 將單選框與 $scope 中的屬性對應(yīng)，便實現(xiàn)了 type=”radio” 時的雙向動態(tài)綁定。

<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 的內(nèi)置指令 ng-true-value 和 ng-false-value ，指定多選框在選中和未選中狀態(tài)下對應(yīng)的值，再通過ng-model 將其與 $scope 中的屬性對應(yīng)，便實現(xiàn)了type=”checkbox” 的雙向動態(tài)綁定。

<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>

以上就是關(guān)于AngularJS單選框及多選框?qū)崿F(xiàn)雙向動態(tài)綁定的相關(guān)介紹，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: