AngularJS 表单元素值绑定

来源：互联网发布：听小说的软件编辑：程序博客网时间：2024/05/21 07:07

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;    };});

效果：
这里写图片描述

0 0