欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2017年10月11日 08:58:56   作者：Zerone1993  
這篇文章主要介紹了AngularJS實現(xiàn)表單元素值綁定操作,結(jié)合具體實例形式分析了AngularJS針對表單元素屬性相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了AngularJS實現(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>
請輸入：<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;
  };
});

效果：

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

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

相關(guān)文章

  • 詳解Angular.js的$q.defer()服務(wù)異步處理

    詳解Angular.js的$q.defer()服務(wù)異步處理

    相信大家都知道jquery和angular都有defer服務(wù)，這篇文章暫以angular為例談?wù)剛€人的理解，在文章的最后并附上jquery的阮一峰總結(jié)的defer。有需要的朋友們也可以參考借鑒，下面來一起學(xué)習(xí)學(xué)習(xí)吧。
    2016-11-11
  • angular中不同的組件間傳值與通信的方法

    angular中不同的組件間傳值與通信的方法

    本篇文章主要介紹了angular中不同的組件間傳值與通信的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-11-11
  • AngularJS仿蘋果滑屏刪除控件

    AngularJS仿蘋果滑屏刪除控件

    前端開發(fā)中，為了對列表項進行快捷操作，有時就添個按鈕來簡單實現(xiàn)。但是，有時會發(fā)現(xiàn)按鈕影響美觀，甚至影響列表行的布局。稍在網(wǎng)上搜索無果，而寫此仿蘋果滑屏刪除控件
    2016-01-01
  • angular雙向綁定模擬探索

    angular雙向綁定模擬探索

    這篇文章主要和大家一起探索模擬angular的雙向綁定，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-12-12
  • 再談Angular4 臟值檢測(性能優(yōu)化)

    再談Angular4 臟值檢測(性能優(yōu)化)

    這篇文章主要介紹了再談Angular4 臟值檢測(性能優(yōu)化)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04
  • Angular2的管道Pipe的使用方法

    Angular2的管道Pipe的使用方法

    本篇文章主要介紹了Angular 2的管道Pipe的使用方法，詳細的介紹了管道的定義和使用方法，具有一定的參考價值，有興趣的可以了解一下
    2017-11-11
  • 淺談AngularJs 雙向綁定原理(數(shù)據(jù)綁定機制)

    淺談AngularJs 雙向綁定原理(數(shù)據(jù)綁定機制)

    本篇文章主要介紹了淺談AngularJs 雙向綁定原理(數(shù)據(jù)綁定機制)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12
  • Angular多選、全選、批量選擇操作實例代碼

    Angular多選、全選、批量選擇操作實例代碼

    列表批量選擇是一個開發(fā)人員經(jīng)常遇到的功能，列表批量選擇的實現(xiàn)方式很多，這篇文章主要介紹了Angular多選、全選、批量選擇實例代碼，有興趣的可以了解一下。
    2017-03-03
  • angular實現(xiàn)IM聊天圖片發(fā)送實例

    angular實現(xiàn)IM聊天圖片發(fā)送實例

    本篇文章主要介紹了angular實現(xiàn)IM聊天圖片發(fā)送實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-05-05
  • AngularJS使用$http配置對象方式與服務(wù)端交互方法

    AngularJS使用$http配置對象方式與服務(wù)端交互方法

    今天小編就為大家分享一篇AngularJS使用$http配置對象方式與服務(wù)端交互方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08

最新評論