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入門(mén)與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

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

您可能感興趣的文章:

相關(guān)文章

用Angular實(shí)時(shí)獲取本地Localstorage數(shù)據(jù),實(shí)現(xiàn)一個(gè)模擬后臺(tái)數(shù)據(jù)登入的效果
這篇文章主要介紹了用ANGULAR實(shí)時(shí)獲取本地LOCALSTORAGE數(shù)據(jù),實(shí)現(xiàn)一個(gè)模擬后臺(tái)數(shù)據(jù)登入的效果的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-11-11
Angularjs整合微信UI（weui）
本文給大家推薦的是使用angularjs實(shí)現(xiàn)整合微信新推出的UI（weui）的全部過(guò)程，有相同需求的小伙伴可以參考下
2016-03-03
angular1.x ui-route傳參的三種寫(xiě)法小結(jié)
今天小編就為大家分享一篇angular1.x ui-route傳參的三種寫(xiě)法小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
AngularJS入門(mén)教程之過(guò)濾器用法示例
這篇文章主要介紹了AngularJS過(guò)濾器用法,結(jié)合實(shí)例形式簡(jiǎn)單的分析了AngularJS過(guò)濾器的功能及基本用法,并舉例說(shuō)明了自定義過(guò)濾器的實(shí)現(xiàn)技巧,需要的朋友可以參考下
2016-11-11
淺談AngularJS中使用$resource（已更新）
這篇文章主要介紹了淺談AngularJS中使用$resource（已更新）的相關(guān)資料,需要的朋友可以參考下
2017-09-09
Angular實(shí)現(xiàn)類似博客評(píng)論的遞歸顯示及獲取回復(fù)評(píng)論的數(shù)據(jù)
這篇文章主要給大家介紹了關(guān)于Angular如何實(shí)現(xiàn)類似博客評(píng)論的遞歸顯示及獲取回復(fù)評(píng)論的數(shù)據(jù)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2017-11-11
Angular中ng-options下拉數(shù)據(jù)默認(rèn)值的設(shè)定方法
本篇文章主要介紹了Angular中ng-options下拉數(shù)據(jù)默認(rèn)值的設(shè)定方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
淺析angularJS中的ui-router和ng-grid模塊
下面小編就為大家?guī)?lái)一篇淺析angularJS中的ui-router和ng-grid模塊。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
Angular2入門(mén)--架構(gòu)總覽
本文主要介紹了Angular2的架構(gòu)的相關(guān)知識(shí)。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-03-03
Angular2 父子組件數(shù)據(jù)通信實(shí)例
這篇文章主要介紹了Angular2 父子組件數(shù)據(jù)通信實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06