`
Supanccy2013
  • 浏览: 226976 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

angularJs--1入门小例子

阅读更多 
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<html ng-app>
<head>
<script type="text/javascript"
	src="/angularJs/angular-1.2.19/angular.min.js"></script>
</head>
<body>
	<div ng-controller="testCtrl">
		<b>小型计算器:</b> <br> <br>
		<table>
			<tr>
				<td>数字1</td>
				<td>数字2</td>
			</tr>
			<tr>
				<td><input type="number" 
				           min="0" 
				           max="10" 
				           ng-model="number1"
					       required></td>
				<td><input type="number" 
				           min="2" 
				           max="10" 
				           ng-model="number2"
					       required></td>
			</tr>
		</table>
		<hr>
		<b>Total:</b> {{number1 * number2 | currency}}
	</div>
   <div ng-controller="registUser">
       <b>注册用户：</b><br><br>
       <table>
			<tr>
				<td>用户名:</td>
				<td><input type="text" ng-model="userName"></td>
			</tr>
			<tr>
				<td>密码:</td>
				<td><input type="password" ng-model="password"></td>
			</tr>
		</table>
   </div>
   <script>
            function testCtrl($scope) {
                $scope.number1 = 2;
                $scope.number2 = 5.6;
            }
            function registUser($scope){
            	$scope.userName = "chenchaoyang";
            	$scope.password="china";
            }
   </script>
</body>
</html>
分享到：
| echars--旋风条形图负值显示正值
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    AngularJS--angular-phonecat

    "AngularJS--angular-phonecat"是一个经典的入门教程，旨在帮助初学者理解AngularJS的核心概念和工作原理。尽管描述中提到这个项目可能与网上的教程存在一些小差异且没有包含测试部分，但它仍然是学习AngularJS的一...

    XXX电商系统开发-前端框架AngularJS入门.docx

    入门小 Demo-1 双向绑定 &lt;script src="angular.min.js"&gt;&lt;/script&gt; &lt;body ng-app&gt; 请输入你的姓名：&lt;input ng-model="myname"&gt; {{myname}},你好 ``` 这里使用了`ng-model`指令来实现输入框和变量`myname`...

    AngularJS 中文版 入门 基础 教程

    **AngularJS 中文版 入门 基础 教程** AngularJS 是一款由Google维护的开源JavaScript框架，主要用于构建动态web应用。它通过MVC（Model-View-Controller）架构模式，使得前端开发更加模块化，提高了开发效率。本...

    AngularJs 60分钟入门基础教程

    一个简单的例子是，在AngularJs应用中，用户输入框的文本变化能够实时反映到绑定对象的相应属性上。 过滤器（Filters）在AngularJs中用于格式化数据，比如日期、货币等。它们使得开发者可以更加方便地处理数据格式...

    AngularJS入门教程中SQL实例详解

    1. **初始化AngularJS模块**： `var app = angular.module('myApp', []);` 创建了一个名为`myApp`的新模块，空数组表示没有依赖其他模块。 2. **定义控制器**： `app.controller('customersCtrl', function($...

    AngularJS入门教程12：完结篇 [示例工程]

    对于更多我们在教程部分提及的细节以及AngularJS理论的例子，你可以在开发指南中找到。 AngularJS初学者看到中文入门教程，却无法使用GitHub下载到配套的Angular的Seed工程，因此学习曲线大。在此专门下载配套工程...

    AngularJS入门教程03：迭代器

    通过深入实践AngularJS的入门教程，尤其是与`ngRepeat`相关的部分，你可以快速掌握这个强大的工具，并进一步提高开发效率。记得利用GitHub等版本控制工具下载和管理项目文件，这对于协作和学习都是非常有帮助的。...

    AngularJS入门教程之表格实例详解

    在AngularJS中，表格是数据展示的一个重要组成部分。AngularJS的表格实现主要依赖于`ng-repeat`指令，它能够方便地遍历数组或对象，并在HTML元素中动态生成内容。在本文中，我们将深入探讨如何使用AngularJS创建表格...

    AngularJs入门教程

    对于初学者来说，AngularJs入门教程是一份非常重要的学习资源。这份教程的目的是帮助零基础的开发者逐步学习AngularJs，并通过实际操作构建出一个完整的web应用程序，以此来掌握AngularJs的技术精髓。这个入门级项目...

    AngularJS实例入门

    **AngularJS实例入门** AngularJS，作为Google维护的一个开源JavaScript框架，主要用于构建单页应用程序（Single Page Applications, SPA）。它提供了丰富的功能，如数据绑定、依赖注入、指令系统和模块化，极大地...

    AngularJS 之Hello World篇

    本篇文章将深入探讨AngularJS的基础知识，通过"Hello World"实例来引导初学者入门。 首先，AngularJS的核心设计理念是数据绑定和依赖注入。数据绑定允许开发者将视图与模型之间的交互自动化，使得视图的改变能够...

    angularjs:angularjs轻松入门博文

    这篇博文的目的是引导初学者轻松入门AngularJS，掌握其核心概念和基本用法。 **1. AngularJS简介** AngularJS的核心理念是双向数据绑定，它将视图和模型紧密结合，使得任何一方的改变都会自动反映到另一方。此外，...

    AngularJS中table表格基本操作示例

    除了本文所提供的示例外，开发者可以进一步查阅《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》以及《AngularJS MVC架构总结》等资源，这些资料可以帮助开发者全面深入地了解AngularJS的框架和编程思想...

    AngularJS中的表单简单入门

    在这个例子中，`ng-model`指令将每个输入字段与`user`对象的属性绑定，使得表单数据可以直接与应用的模型同步。`ng-click`指令则用于在按钮被点击时调用`reset()`方法。 **控制器的作用** `ng-controller`指令定义...

    AngularJS入门教程之Select(选择框)详解

    AngularJS是一个流行的前端JavaScript框架，由Google团队开发，用以构建动态Web应用程序。其中，Select（选择框）控件是用户交互中常用的元素之一，它允许用户从一组选项中进行选择。AngularJS通过ng-options指令...

    AngularJS学习笔记

    本学习笔记是作者邹业盛个人的学习记录，重点记录了从入门到深入理解AngularJS过程中的一些心得体验。文档并未按照严格的教程格式编写，而是侧重于实践和逐步探索AngularJS的各种特性和功能。 **学习路径**：文档...

    AngularJS使用ng-repeat遍历二维数组元素的方法详解

    AngularJS是Google开发的一款非常流行的JavaScript...同时，也可以进一步了解其他AngularJS的相关内容，例如指令操作技巧、AngularJS入门教程以及AngularJS的MVC架构，这些都会对设计和构建AngularJS程序有极大的帮助。

    AngularJS入门教程之AngularJS模型

    接下来将详细介绍AngularJS入门教程中关于模型的一些基本知识点。 1. 双向数据绑定：ng-model在AngularJS中实现的是双向数据绑定，这意味着模型数据和视图元素之间建立了直接的联系。当模型数据发生变化时，视图上...

    AngularJS入门教程之ng-checked 指令详解

    在这个例子中，“Checkall”复选框扮演了“全选”功能的核心角色，当它被选中时，`all`变量的值为true，通过ng-checked指令关联的所有汽车品牌复选框也因此全部被选中。同理，如果“Checkall”复选框被取消选中，`...

Magicbox
Global site tag (gtag.js) - Google Analytics