AngularJS實現表單元素值綁定操作示例
更新時間：2017年10月11日 08:58:56 作者：Zerone1993
這篇文章主要介紹了AngularJS實現表單元素值綁定操作,結合具體實例形式分析了AngularJS針對表單元素屬性相關操作技巧,需要的朋友可以參考下
本文實例講述了AngularJS實現表單元素值綁定操作。分享給大家供大家參考，具體如下：
ng-disabled:綁定控件的disabled屬性
ng-show:顯示或者隱藏元素：ms-visible
ng-hide:和ng-show的功能恰好相反
css內容：
div.d1{
width: 20px;
height: 20px;
background-color: pink;
}
div.d2{
width: 20px;
height: 20px;
background-color: black;
}
HTML正文：
<body ng-app="myApp" ng-controller="myctr">
<div>
請輸入：<input type="text" placeholder="....." ng-disabled="flag">{{flag}}<br>
切換輸入：<input type="button" value="switch input" ng-click="switchInput();">
</div>
<hr ng-init="checkValue=false">
input:<input type="text" ng-disabled="checkValue">{{checkValue}}<br>
<input type="checkbox" ng-model="checkValue">stop input <!-- 注意ng-model不能作用于單選框 -->
<hr>
<p>ng-show:flag</p>
<div class="d1" ng-show="flag"></div>
<p>ng-hide:checkValue</p>
<div class="d2" ng-hide="checkValue"></div>
<hr>
<!-- ng-click：后面可以直接跟表達式，表達式會直接執(zhí)行，變量不支持++操作 -->
<input type="button" ng-click="count = count + 1" value="加1">：{{count}}
Javascript操作代碼：
var app = angular.module('myApp', []);
app.controller('myctr', function($scope) {
$scope.flag=false;
$scope.count=0;
$scope.switchInput=function(){
$scope.flag=!$scope.flag;
};
});
效果：
更多關于AngularJS相關內容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結》、《AngularJS入門與進階教程》及《AngularJS MVC架構總結》
希望本文所述對大家AngularJS程序設計有所幫助。
相關文章
相信大家都知道jquery和angular都有defer服務，這篇文章暫以angular為例談談個人的理解，在文章的最后并附上jquery的阮一峰總結的defer。有需要的朋友們也可以參考借鑒，下面來一起學習學習吧。2016-11-11
本篇文章主要介紹了angular中不同的組件間傳值與通信的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
前端開發(fā)中，為了對列表項進行快捷操作，有時就添個按鈕來簡單實現。但是，有時會發(fā)現按鈕影響美觀，甚至影響列表行的布局。稍在網上搜索無果，而寫此仿蘋果滑屏刪除控件2016-01-01
這篇文章主要和大家一起探索模擬angular的雙向綁定，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了再談Angular4 臟值檢測(性能優(yōu)化)，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
本篇文章主要介紹了Angular 2的管道Pipe的使用方法，詳細的介紹了管道的定義和使用方法，具有一定的參考價值，有興趣的可以了解一下2017-11-11
本篇文章主要介紹了淺談AngularJs 雙向綁定原理(數據綁定機制)，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
列表批量選擇是一個開發(fā)人員經常遇到的功能，列表批量選擇的實現方式很多，這篇文章主要介紹了Angular多選、全選、批量選擇實例代碼，有興趣的可以了解一下。2017-03-03
本篇文章主要介紹了angular實現IM聊天圖片發(fā)送實例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
AngularJS使用$http配置對象方式與服務端交互方法
今天小編就為大家分享一篇AngularJS使用$http配置對象方式與服務端交互方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08