ng-show 指令

编辑教程

上一节： ng-click 指令下一节： body 中的 AngularJS 模块

ng-show 指令

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="personCtrl">

<button ng-click="toggle()">隐藏/显示</button>

<p ng-show="myVar">
名: <input type=text ng-model="person.firstName"><br>
姓: <input type=text ng-model="person.lastName"><br><br>
姓名: {{person.firstName + " " + person.lastName}}
</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.person = {
        firstName: "John",
        lastName: "Doe"
    };
    $scope.myVar = true;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    };
});
</script>

</body>
</html>

结果

上一节： ng-click 指令下一节： body 中的 AngularJS 模块

Mos固件，小电视必刷固件 ES6 教程 Vue.js 教程 JSON 教程 jQuery 教程 HTML 教程 HTML 5 教程 CSS 教程 CSS3 教程 JavaScript 教程 DHTML 教程 JSON在线格式化工具 JS在线运行 JSON解析格式化 jsfiddle中国国内版本 JS代码在线运行 PHP代码在线运行 Java代码在线运行 C语言代码在线运行 C++代码在线运行 Python代码在线运行 Go语言代码在线运行 C#代码在线运行

JSRUN闪电教程系统是国内最先开创的教程维护系统，所有工程师都可以参与共同维护的闪电教程，让知识的积累变得统一完整、自成体系。大家可以一起参与进共编，让零散的知识点帮助更多的人。

金额 :

选择支付方式：

立即支付

￥ 9.99

无法付款，请点击这里

金额： 0 元
备注：
转账时请填写正确的金额和备注信息，到账由人工处理，可能需要较长时间

如有疑问请联系QQ:565830900

正在生成二维码，此过程可能需要15秒钟