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> ...
随机推荐
- linux中替换目录下的某个文件中包含的IP地址
#!/bin/bash #set -x oldIP=172.17.39.135 newIP=172.17.98.115 homefile=/usr/local/ims/ filelist=`grep ...
- 白帽子讲Web安全1.pdf
第一章 我的安全世界观 安全是一个持续过程 6种威胁:Spoofing(伪装).Tampering(篡改).Repudiation(抵赖).InformationDisclosure(信息泄漏).De ...
- 为虚拟机搭建MacOSX系统
发现一篇正确的安装文章,转载自:http://blog.imqyc.com/2013/05/29/vritual-MacOS/ 今年新买了一个笔记本电脑,本打算购入心仪已久的Macbook Pro 1 ...
- linux ant 解决 错误: 找不到或无法加载主类 org.apache.tools.ant.launch.Launcher
在使用ant进行java程序编译的时候出错.错误提示: Error: Could not find or load main class org.apache.tools.ant.launch.Lau ...
- coco2dx 精灵类
CCSize size = CCDirector::sharedDirector()->getWinSize(); CCSprite *bg = CCSprite::create("H ...
- HTML5 API 浏览器支持情况检测
HTML5发展到现在,虽说没有大规模的普及,但在我们日常生活中,也很容易见到了,HTML5的游戏.网站.应用也是层出不穷.而作为前端人员,也应该多了解这些API为以后应用打基础,下面我将给大家介绍 H ...
- PreferenceActivity的使用
PreferenceActivity是一个非常有用的基类,当我们开发Android项目时避免不了选项设置,这些设置习惯用Preference来保存.Android专门为这种Activity提供了便捷的 ...
- SQL高级优化之经常使用的优化策略-2（The Return Of The King）
1.2 索引 索引不是越多越好,你须要知道索引建立多了.写入数据的效率会减少.怎样使用索引要看你的项目的应用场景,做出合理的測试评估. 1.2.1 统计数量 统计数量上.假设字段(fieldName) ...
- visualvm
http://visualvm.java.net/features.html http://visualvm.java.net/zh_CN/gettingstarted.html
- lua function
This is the main reference for the World of Warcraft Lua Runtime. Note that these are mostly standar ...