angular 基础练习
<!DOCTYPE HTML>
<html>
<head>
<title> 测试页 </title>
<meta charset="utf-8"> </head>
<body ng-app="myApp">
<div ng-controller="query">
<input id="input" ng-model="text">
<span ng-bind="text"></span>
<button ng-click="submit()">提交</button>
</div> <div class="select" ng-controller="select">
<span ng-click="spanClick()" ng-bind="value"></span>
<ul ng-hide="show">
<li ng-repeat="l in list" ng-bind="l" ng-click="liClick($index)"></li>
</ul>
</div>
<script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
</body>
</html>
JS 部分
var myApp = angular.module("myApp", []);
myApp.service("validator", function(){
return function(str, type){
return !!str;
}
});
myApp.controller("query", ["$scope", "validator", function($scope, validator){
//$scope.abc = abc;
console.log(abc);
$scope.text ="hello";
$scope.submit = function(){
console.log('sbumit');
var input = document.getElementById("input");
if(!validator(input.value)){
console.log('请输入用户名');
}else{
console.log('ok');
}
}
}]);
myApp.controller("select", function($scope){
$scope.show = true;
$scope.value = "请选择";
$scope.spanClick = function(){
$scope.show = !$scope.show;
}
$scope.list = ["1", "2","3"];
$scope.liClick = function(index){
$scope.value = $scope.list[index];
}
});
一些基础指令练习。
昨天在跟着视频练习时，遇到了不能使用纯function 定义controller 的情况，我想应该是新版不支持了吧？
每天进步一点点。
angular 基础练习的更多相关文章
- 第214天:Angular 基础概念
一.Angular 简介 1. 什么是 AngularJS - 一款非常优秀的前端高级 JS 框架 - 最早由 Misko Hevery 等人创建 - 2009 年被 Google 公式收购,用于其多 ...
- Angular基础---->AngularJS的使用(一)
AngularJS主要用于构建单页面的Web应用.它通过增加开发人员和常见Web应用开发任务之间的抽象级别,使构建交互式的现代Web应用变得更加简单.今天,我们就开始Angular环境的搭建和第一个实 ...
- Angular基础(三) TypeScript
一.模仿Reddit a) 运行ng new –ng4angular-reddit创建应用,从随书代码中复制样式文件,新建组件app-root,代码为: 界面可以看到了: b) 对于界面输入的数据,获 ...
- Angular基础(二) 组件的使用
一.简单操作 a) 使用Angular CLI可以快速创建项目框架,先运行 $ npm install –g @angular/cli@1.0.0安装CLI,为CLI的位置设置环境变量,然后就可以 ...
- angular基础入门
第一章 AngularJs入门 AngularJS是一款由Google公司开发维护的前端框架,其克服了HTML在构建应用上的诸多不足,从而降低了开发成本提升了开发效率. 1 特点 AngularJS与 ...
- Angular 基础入门
简介 什么是AngularJS 一个功能非常完备的前端框架,通过增强HTML的方式提供一种便捷开发Web应用程序的方式 其核心特点就是几乎无任何DOM操作,让开发人员的精力和时间全部集中于业务 MVC ...
- Angular基础教程：表达式日期格式化[转]
本地化日期格式化: ({{ today | date:'medium' }})Nov 24, 2015 2:19:24 PM ({{ today | date:'short' }})11/24/15 ...
- Angular基础知识
AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 ng-directives 扩展了 HTML. ...
- Angular基础（二）
双向数据 利用angular把input框里面的值和h3的值绑定在一起.在input里输入内容,内容会在h3标签里显示出来. 具体效果请看下面代码: <!DOCTYPE html> ...
随机推荐
- HDOJ/HDU 2140 Michael Scofield's letter(字符转换~)
Problem Description I believe many people are the fans of prison break. How clever Michael is!! In o ...
- is not mapped 解决方法
1.确定是否已配置相关XML 2.注意类名大小写问题 3.如果是注解 第一种方式 @Entity(name = "Tb_User") public class User { ...
- JSP控制select不可再选择
首先分析下disable ,display和readonly: 1,Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效 ...
- hdu 1159 Palindrome(回文串) 动态规划
题意:输入一个字符串,至少插入几个字符可以变成回文串(左右对称的字符串) 分析:f[x][y]代表x与y个字符间至少插入f[x][y]个字符可以变成回文串,可以利用动态规划的思想,求解 状态转化方程: ...
- 操作12864（ST7920控制器）
引脚部分查看中文的12864介绍,下面这些可以在ST7920的英文数据手册里查到. Function Description 部分介绍工作方式.存储器.操作方法.Instructions 部分介绍指令 ...
- Spark RDD/Core 编程 API入门系列之动手实战和调试Spark文件操作、动手实战操作搜狗日志文件、搜狗日志文件深入实战（二）
1.动手实战和调试Spark文件操作 这里,我以指定executor-memory参数的方式,启动spark-shell. 启动hadoop集群 spark@SparkSingleNode:/usr/ ...
- UVA 6199 不定根最小树形图
首先是最小树形图的介绍. 看这个博客.最小树形图 上面介绍的很详细了,我就讲一下这道题的题意. 首先给出一些二维点坐标,这些坐标之间构成一些有向图,根据题意,假设两个点a(x1 ,y1) ,b(x2 ...
- 微信开发第5章 通过accesstoken获取用户基本信息并修改用户备注
在关注者与公众号产生消息交互后,公众号可获得关注者的OpenID(加密后的微信号,每个用户对每个公众号的OpenID是唯一的.对于不同公众号,同一用户的openid不同).公众号可通过本接口来根据Op ...
- 新安装XAMPP，phpMyAdmin错误：#1045 - Access denied for user 'root'@'localhost' (using password: NO)
错误如下: 打开D:\Program Files\xampp\phpMyAdmin(你的xampp的安装目录下的phpMyAdmin目录)目录下的config.inc.php文件 将 改为 然后,错误 ...
- ffmpeg的logo, delogo滤镜参数设置
FFmpeg的添加logo,去logo滤镜的组合共有三种方式: 1. 只有添加logo滤镜 $ ./ffmpeg -i INPUT.FLV \ -vf movie=/opt/logo.png[log ...