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> ...
随机推荐
- 执行configure报错configure: error: C++ preprocessor "/lib/cpp" fails sanity check
解决方案: 出现该情况是由于c++编译器的相关package没有安装,以root用户登陆,在终端上执行: # yum install glibc-headers # yum install gcc-c ...
- SCI写作经典替换词，瞬间高大上！(转)
转自微信:http://mp.weixin.qq.com/s?__biz=MzA4NDk3ODEwNQ==&mid=202006470&idx=2&sn=e8900b94448 ...
- Bzoj 3505: [Cqoi2014]数三角形 数论
3505: [Cqoi2014]数三角形 Time Limits: 1000 ms Memory Limits: 524288 KB Detailed Limits Description
- Ubuntu12.04-64bits搭建FFmpeg环境
所有的环境搭建动作请参考FFMpeg官方网站:http://www.ffmpeg.org/index.html 1. 获取源代码: git clone git://source.ffmpeg.org/ ...
- 一步一步写一个简单通用的makefile(三)
上一篇一步一步写一个简单通用的makefile(二) 里面的makefile 实现对通用的代码进行编译,这一章我将会对上一次的makefile 进行进一步的优化. 优化后的makefile: #Hel ...
- Struct2 拦截器
拦截器的整个过程 程序是在执行Action之前调用的拦截器,整个过程是这样子的 这里面注意两个问题: public void serviceAction(HttpServletRequest requ ...
- 异常-JAVA
#异常 ##1.异常处理概述 1.异常时程序在执行过程中所产生的问题.导致异常的原因的有很多种,包括: 1. 用户输入了无效数据 2. 找不到一个需要打开的文件 3. 在通讯过程中 ...
- Office在线预览及PDF在线预览的实现方式史上最全大集合
Office在线预览及PDF在线预览的实现方式大集合 一.服务器先转换为PDF,再转换为SWF,最后通过网页加载Flash预览 微软方:利用Office2007以上版本的一个PDF插件SaveAsPD ...
- 3proxy代理软件文档说明
官方英文原版说明:http://www.3proxy.ru/howtoe.asp 配置文件的简要说明:如果你的英文理解力好,可以试着研究一下他的手册. 以实例说明吧 nscache 65536域名解析 ...
- 安装MYSQL 出现Error 1045 access denied 的解决方法
操作系统:WINDOWS10 系统 数据库版本:mysql 5.x 提示:access denied for user 'root'@'localhost' using password yes/no ...