AngularJS表单元素值实现绑定操作详解-js教程-PHP中文网

首页

web前端

js教程

AngularJS表单元素值实现绑定操作详解

小云云

Jan 25, 2018 am 11:29 AM

angularjs javascript 绑定

本文主要介绍了AngularJS实现表单元素值绑定操作,结合具体实例形式分析了AngularJS针对表单元素属性相关操作技巧,需要的朋友可以参考下，希望能帮助到大家。

ng-disabled:绑定控件的disabled属性
ng-show:显示或者隐藏元素：ms-visible
ng-hide:和ng-show的功能恰好相反

css内容：

p.d1{
 width: 20px;
 height: 20px;
 background-color: pink;
}
p.d2{
  width: 20px;
 height: 20px;
 background-color: black;
}

登录后复制

HTML正文：

<body ng-app="myApp" ng-controller="myctr">
<p>
请输入：<input type="text" placeholder="....." ng-disabled="flag">{{flag}}<br>
切换输入：<input type="button" value="switch input" ng-click="switchInput();">
</p>
<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>
<p class="d1" ng-show="flag"></p>
<p>ng-hide:checkValue</p>
<p class="d2" ng-hide="checkValue"></p>
<hr>
<!-- ng-click：后面可以直接跟表达式，表达式会直接执行，变量不支持++操作 -->
<input type="button" ng-click="count = count + 1" value="加1">：{{count}}

登录后复制

Javascript操作代码：

var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myctr&#39;, function($scope) {
  $scope.flag=false;
  $scope.count=0;
  $scope.switchInput=function(){
    $scope.flag=!$scope.flag;
  };
});

登录后复制

效果：

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7677

CakePHP 教程

1393

C# 教程

1207

steam的账户名称是什么格式

win11激活密钥永久

显示更多

Related knowledge

如何使用WebSocket和JavaScript实现在线语音识别系统 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript实现在线语音识别系统引言：随着科技的不断发展，语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统，具备了低延迟、实时性和跨平台的特点，成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系

BTCC教学：如何在BTCC交易所绑定使用MetaMask钱包？ Apr 26, 2024 am 09:40 AM

MetaMask（中文也叫小狐狸钱包）是一款免费的、广受好评的加密钱包软件。目前，BTCC已支持绑定MetaMask钱包，绑定后可使用MetaMask钱包进行快速登入，储值、买币等，且首次绑定还可获得20USDT体验金。在BTCCMetaMask钱包教学中，我们将详细介绍如何注册和使用MetaMask，以及如何在BTCC绑定并使用小狐狸钱包。MetaMask钱包是什么？MetaMask小狐狸钱包拥有超过3,000万用户，是当今最受欢迎的加密货币钱包之一。它可免费使用，可作为扩充功能安装在网络

WebSocket与JavaScript：实现实时监控系统的关键技术 Dec 17, 2023 pm 05:30 PM

WebSocket与JavaScript：实现实时监控系统的关键技术引言：随着互联网技术的快速发展，实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用，并给出代码示例，详细解释其实现原理。一、WebSocket技

小红书怎么绑定子账号？它怎么检测账号是否正常？ Mar 21, 2024 pm 10:11 PM

在如今这个信息爆炸的时代，个人品牌和企业形象的建设变得越来越重要。小红书作为国内领先的时尚生活分享平台，吸引了大量用户关注和参与。对于那些希望扩大影响力、提高内容传播效率的用户来说，绑定子账号成为了一种有效的手段。那么，小红书怎么绑定子账号呢？又如何检测账号是否正常呢？本文将为您详细解答这些问题。一、小红书怎么绑定子账号？1.登录主账号：首先，您需要登录您的小红书主账号。2.打开设置菜单：点击右上角的“我”，然后选择“设置”。3.进入账号管理：在设置菜单中，找到“账号管理”或“账号助手”选项，点

如何利用JavaScript和WebSocket实现实时在线点餐系统 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket实现实时在线点餐系统介绍：随着互联网的普及和技术的进步，越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统，我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议，可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中，当用户选择菜品并下单

今日头条中绑定抖音的步骤方法 Mar 22, 2024 pm 05:56 PM

1、打开今日头条。2、点击右下角我的。3、点击【系统设置】。4、点击【账号和隐私设置】。5、点击【抖音】右边的按钮即可绑定抖音。

如何使用WebSocket和JavaScript实现在线预约系统 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript实现在线预约系统在当今数字化的时代，越来越多的业务和服务都需要提供在线预约功能。而实现一个高效、实时的在线预约系统是至关重要的。本文将介绍如何使用WebSocket和JavaScript来实现一个在线预约系统，并提供具体的代码示例。一、什么是WebSocketWebSocket是一种在单个TCP连接上进行全双工

菜鸟app怎么绑定拼多多菜鸟裹裹怎么添加拼多多平台 Mar 19, 2024 pm 02:30 PM

　　菜鸟app就是能够为你们提供出各种物流信息状况的平台，这里的功能非常的强大好用，大家有任何与物流相关的问题，都能在这得到解决的，反正都能为你们带来一站式的服务，全都能及时解决的，查快递，取快递，寄快递等，都是毫无任何问题，与各个的平台都进行了合作，全部的信息，都能查询得到的，但是有些时候会出现拼多多当中购买的商品，都是无法呈现出物流的信息，其实是需要大家进行手动绑定拼多多，才能实现的，具体的方法已经整理出来了在下方，大家都能来看看的。菜鸟绑定拼多多账户的方法：　　1、打开菜鸟APP，在主页面

See all articles

AngularJS表单元素值实现绑定操作详解

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题