AngularJS实现表单元素值绑定操作示例

2019-11-19 15:12:02

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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：后面可以直接跟表达式，表达式会直接执行，变量不支持++操作 --><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;  };});

效果：