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> ...
随机推荐
- Redis主从实现原理分析 [转]
原文地址:http://blog.sina.com.cn/s/blog_7530db6f0100vegl.html 一, 实现原理图 (1)Slave服务器连接到Master服务器. (2)Slave ...
- WinDbg配置和使用基础
WinDbg配置和使用基础 WinDbg是微软发布的一款相当优秀的源码级(source-level)调试工具,可以用于Kernel模式调试和用户模式调试,还可以调试Dump文件. 1. WinDbg介 ...
- 移动平台WEB前端开发技巧
1.首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用 <meta content="width=device-width ...
- NIO的学习
参考 http://wenku.baidu.com/link?url=rq-BEp3Et4JRrE62f2Lv9hq8nT_Gq0XPb65h8OBqTAt-ILfqKmdjIhVEp8bctIdm0 ...
- poj 3237 Tree（树链剖分，线段树）
Tree Time Limit: 5000MS Memory Limit: 131072K Total Submissions: 7268 Accepted: 1969 Description ...
- 3 视频里weekend05、06、07的可靠性 + HA原理、分析、机制 + weekend01、02、03、04、05、06、07的分布式集群搭建
现在,我们来验证分析下,zookeeper集群的可靠性 现在有weekend05.06.07 将其一个关掉, 分析,这3个zookeeper集群里,杀死了weekend06,还存活weekend05. ...
- JAVA基础英语单词表（中）
factory / 'fæktəri / 工厂 fetch ...
- PHP开发APP接口（二）
这里将会调用前面博客的数据库连接单例.文件缓存类和开发APP接口(一) <?php // http://app.com/list.php?page-=1&pagesize=12 requ ...
- PAT 1078. Hashing
The task of this problem is simple: insert a sequence of distinct positive integers into a hash tabl ...
- tar linux 打包 压缩 gzip 命令说明
参数:-c :建立一个压缩档案的参数指令(create 的意思):-x :解开一个压缩档案的参数指令!-t :查看 tarfile 里面的档案! 特别注意,在参数的下达中, c/x/t ...