溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

angularJs復選框checkbox選中進行ng-show顯示隱藏的示例分析

發(fā)布時間:2021-06-26 14:08:20 來源:億速云 閱讀:141 作者:小新 欄目:web開發(fā)

這篇文章主要為大家展示了“angularJs復選框checkbox選中進行ng-show顯示隱藏的示例分析”,內容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領大家一起研究并學習一下“angularJs復選框checkbox選中進行ng-show顯示隱藏的示例分析”這篇文章吧。

如下所示:

ng-true-value="1" //代表選中的時候,值為1
ng-false-value="0" //代表未選中的時候,值為0
<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <script src="angular.min.js"></script>
</head>
<body>
<div ng-app="module" ng-controller="ctrl">
 游戲: <input type="checkbox" ng-model="data.game" ng-true-value="1" ng-false-value="0">
 電影: <input type="checkbox" ng-model="data.video" ng-true-value="1" ng-false-value="0">
 <div ng-show="data.game==1">
  <h2>游戲被選中</h2>
 </div>
 <div ng-show="data.video==1">
  <h2>電影被選中</h2> 
 </div>
</div>
<script>
 var m = angular.module('module', []);
 m.controller('ctrl', ['$scope', function ($scope) {
  $scope.data = {game: 0, video: 0}; //初始化未選中,值為0
 }]);
</script>
</body>
</html>

以上是“angularJs復選框checkbox選中進行ng-show顯示隱藏的示例分析”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業(yè)資訊頻道!

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經查實,將立刻刪除涉嫌侵權內容。

AI