快捷導(dǎo)航

AngularJS實(shí)現(xiàn)表單元素值綁定操作示例

更新時(shí)間：2017年10月11日 08:58:56 作者：Zerone1993

這篇文章主要介紹了AngularJS實(shí)現(xiàn)表單元素值綁定操作,結(jié)合具體實(shí)例形式分析了AngularJS針對(duì)表單元素屬性相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了AngularJS實(shí)現(xiàn)表單元素值綁定操作。分享給大家供大家參考，具體如下：

ng-disabled:綁定控件的disabled屬性
ng-show:顯示或者隱藏元素：ms-visible
ng-hide:和ng-show的功能恰好相反

css內(nèi)容：

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>
請(qǐng)輸入：<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：后面可以直接跟表達(dá)式，表達(dá)式會(huì)直接執(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;
  };
});

效果：

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

詳解Angular.js的$q.defer()服務(wù)異步處理
相信大家都知道jquery和angular都有defer服務(wù)，這篇文章暫以angular為例談?wù)剛€(gè)人的理解，在文章的最后并附上jquery的阮一峰總結(jié)的defer。有需要的朋友們也可以參考借鑒，下面來一起學(xué)習(xí)學(xué)習(xí)吧。
2016-11-11
angular中不同的組件間傳值與通信的方法
本篇文章主要介紹了angular中不同的組件間傳值與通信的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-11-11
AngularJS仿蘋果滑屏刪除控件
前端開發(fā)中，為了對(duì)列表項(xiàng)進(jìn)行快捷操作，有時(shí)就添個(gè)按鈕來簡單實(shí)現(xiàn)。但是，有時(shí)會(huì)發(fā)現(xiàn)按鈕影響美觀，甚至影響列表行的布局。稍在網(wǎng)上搜索無果，而寫此仿蘋果滑屏刪除控件
2016-01-01
angular雙向綁定模擬探索
這篇文章主要和大家一起探索模擬angular的雙向綁定，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
再談Angular4 臟值檢測(性能優(yōu)化)
這篇文章主要介紹了再談Angular4 臟值檢測(性能優(yōu)化)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-04-04
Angular2的管道Pipe的使用方法
本篇文章主要介紹了Angular 2的管道Pipe的使用方法，詳細(xì)的介紹了管道的定義和使用方法，具有一定的參考價(jià)值，有興趣的可以了解一下
2017-11-11
淺談AngularJs 雙向綁定原理(數(shù)據(jù)綁定機(jī)制)
本篇文章主要介紹了淺談AngularJs 雙向綁定原理(數(shù)據(jù)綁定機(jī)制)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-12-12
Angular多選、全選、批量選擇操作實(shí)例代碼
列表批量選擇是一個(gè)開發(fā)人員經(jīng)常遇到的功能，列表批量選擇的實(shí)現(xiàn)方式很多，這篇文章主要介紹了Angular多選、全選、批量選擇實(shí)例代碼，有興趣的可以了解一下。
2017-03-03
angular實(shí)現(xiàn)IM聊天圖片發(fā)送實(shí)例
本篇文章主要介紹了angular實(shí)現(xiàn)IM聊天圖片發(fā)送實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-05-05
AngularJS使用$http配置對(duì)象方式與服務(wù)端交互方法
今天小編就為大家分享一篇AngularJS使用$http配置對(duì)象方式與服務(wù)端交互方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-08-08