angular 常用指令的使用

<!DOCTYPE html>
<html>
<head><title>angular js进阶</title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"><style type="text/css">.tx{width:50px;height: 50px;}</style><script type="text/javascript" src="../js/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller = "myCtr">
<form name="f" ng-submit="register(user)">
<img ng-show="user.isshow" ng-src="{{user.iconImage}}" ng-class="{'tx':user.showIcon}">
<!--图片路径和模型的绑定，注意那2个大括号，就像swift的拆包一样
ng-show:ng-if,ng-hide 作用都一样是否显示某个元素节点
ng－src : 将图片路径和模型绑定起来
ng-class:将css属性和模型绑定起来
ng-bind 和{{}}作用一样，就主要用作显示，类似swift的拆包
ng-model 就是模型的绑定，这个绑定就是双向的了
ng-checked 单选的时候将其与模型相绑定
ng-selected 用于下拉框的模型绑定
ng-disabled 此控件是否可用
ng-submit    提交将模型传过去，我的理解就是为什么要传呢，直接在js的大对象里去拿就是了嘛，没有试验过啦
ng-repeat 循环元素里面有三个属性比较重要$index代表索引，$first , $last ,后面的2个是bool值，当显示第一个的时候$first  为true 同理最后一个
-->
<input type="text" required>
职位:
<select>
<option value="0" ng-selected="user.zw==0">--请选择--</option>
<option value="1" ng-selected="user.zw==1">ios</option>    <option value="2" ng-selected="user.zw==2">java</option>
</select>
性别：
<input type="radio" name="sex" ng-checked="user.sex==1" >&nbsp;男&nbsp;
<input type="radio" name="sex" ng-checked="user.sex==0">&nbsp;女&nbsp;爱好
<input type="checkbox" name="aihao" ng-checked="user.isSelect(1)" >&nbsp;游泳&nbsp;
<input type="checkbox" name="aihao" ng-checked="user.isSelect(2)">&nbsp;篮球&nbsp;
<input type="checkbox" name="aihao" ng-checked="user.isSelect(3)" >&nbsp;足球&nbsp;
<input type="checkbox" name="aihao" ng-checked="user.isSelect(4)">&nbsp;排球&nbsp;
<!--这里是用表单的一个内置校验方法-->
<button type="submit" ng-disabled="f.$invalid"> 提交</button><ul>
<li ng-repeat="a in addressList" ng-if="!$first">{{$index}}.{{a.addree}}</li>
</ul>
</form>
</body>
<script type="text/javascript" src="../js/app.js">
</script>
</html>

app = angular.module("app",[]);
app.controller("myCtr",function($scope){//自动用上面的值来注入

　　$scope.test = ""
　　$scope.$watch('test',function(){//添加对模型的监听变化
　　　　console.log($scope.test);
　　})

$scope.user={

     iconImage:"../image/headImage.jpg",showIcon : true,isshow:true,sex : "0",zw:"2",aihao:[1,2],isSelect:function(n){var isok=false;console.log(this.aihao)for (var i=0;i<this.aihao.length;i++){if ( n == this.aihao[i]) {isok=truebreak;};}return isok}}$scope.register=function(u){// 这里提交表单，该干嘛就干嘛
    }$scope.addressList=[{id:1,addree:"莲桂西路"},{id:2,addree:"龙舟路"},{id:3,addree:"锦华路"},{id:4,addree:"建设路"}]})

转载于:https://www.cnblogs.com/liyang31tg/p/5008894.html

angular 常用指令的使用相关推荐

angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？
大家好,我是IT修真院郑州分院第七期的学员冯亚超,一枚正直纯洁善良的WEB程序员今天给大家分享一下,题目angular js 常用指令ng-if.ng-class.ng-option.ng-valu ...
angular与angularjs常用指令的不同写法整理
angularjs与angular 常用的指令写法的区别; 一:angularjs指令 1.ng-bind 使用给定的变量或表达式的值来替换 HTML 元素的内容 <p ng-bind=&quo ...
【修真院web小课堂】angular js常用指令 ng-blur、ng-change、ng-focus、ng-disabled是如何运用到表单验证中的？
大家好,我是IT修真院武汉分院web第16期的学员孟晨,一枚正直纯洁善良的web程序员今天给大家分享一下,修真院官网js(职业)任务八,深度思考中的知识点--angular js常用指令 ng-bl ...
2020国庆节 Angular structual 指令学习笔记(＜ng-template＞) 包含语法糖解糖过程
Structural directives are responsible for HTML layout. They shape or reshape the DOM's structure, ty ...
走进AngularJs(二) ng模板中常用指令的使用方式
通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...
Angular ng-model指令详解
Angular ng-model指令详解声明将输入域的值与 AngularJS 创建的变量绑定双向数据绑定表单验证自定义类样式常用应用状态声明本文根据菜鸟教程整理 http://www ...
Python笔记_64_Vue_M-V-VM思想_显示数据_常用指令_操作属性_绑定事件_操作样式_条件渲染指令_列表渲染指令
文章目录 Vue vue.js的M-V-VM思想快速使用显示数据常用指令操作属性绑定事件操作样式条件渲染指令列表渲染指令 Vue vue.js是目前前端web开发最流行的工具库,由尤雨 ...
Debug常用指令和DOSBox使用步骤
Debug是Dos系统中著名的调试程序,也可以运行在Windows系统实模下. 优点: 使用Debug程序,可以查看CPU各种寄存器的内容,内存的情况,并且在机器指令级跟踪程序的运行. DosBox: ...
ubuntu中常用指令
常用指令清空命令行 Ctrl+L Conda 创建虚拟环境 conda create -n 虚拟环境名称 python=3.7.10 查看虚拟环境列表 conda info --envs 激活虚拟环 ...

angular 常用指令的使用

angular 常用指令的使用相关推荐

最新文章

热门文章