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> ...
随机推荐
- HDU- 2265 Encoding The Diary
Encoding The Diary Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Other ...
- 遍历form表单
//表单 var form = new Ext.form.FormPanel({ //创建表单面板 labelAlign: 'center', //水平对齐方式 layout: 'form', //布 ...
- loadrunner调用plink，远程linux执行shell命令
loadrunner调用plink,远程linux执行shell命令 脚本: Action() { char* cmd; cmd = lr_eval_string("C:\\\&qu ...
- ARM学习笔记7——乘法指令
ARM乘法指令完成两个数据的乘法,两个32位二进制数相乘的结果是64位的4积. 其中: 1.“RadHi:RdLo”是由RdHi(最高有效32位)和RdLo(最低有效32位)链接形成的64位数,“[3 ...
- window7电脑设置好了，却无法远程？
设置远程连接: 步骤:右键[我的电脑]-->[属性] 点击[远程设置],然后设置如下: 在 cmd 中 通过 [ipconfig]命令查看IP: 以上设置好了,发现仍无法远程?解决办法如下: 电 ...
- 一个PHP书单 -摘自网络
# PHP <PHP程序设计>(第2版) –PHP语法和入门最好的书 <PHP5权威编程> –PHP入门后升级书 <深入PHP:面向对象.模式与实践>(第3版) – ...
- Asp.Net Design Pattern Studynotes -- Part1
Asp.Net Design Pattern Studynotes -- Part1 let's start with an exampleto entry amazing OO world ! le ...
- MINA学习之IoService
从上一篇文章中知道,IoService出于MINA体系中的底层.IoService将会帮你维护网络交互,接受消息,发送消息,管理Sessions,管理连接Connections等等. IoServic ...
- 在C#中用Linq从属性文件中读取键值对Key-Value Pair
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:在C#中用Linq从属性文件中读取键值对Key-Value Pair.
- 3.3FactoryMethod——工厂方法
意图: 定义一个用于创建对象的接口,让子类决定实例化哪一个类.FactoryMethod使一个类的实例化延迟到其子类. 其实在抽象工厂模式中,经过改进后的模式就是工厂方法模式,所以不多说了,上UML图 ...