7-进军 angular1.x 表单和事件、模块
表单和事件，模块
表单
单选框/select/form/下拉框
- 使用 ng-option
- 和 ng-reapeat
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
select>
div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Google", "Runoob", "Taobao"];
});
script>
复制代码表单的一些思考
拉框初始化无默认值，或者有空白选项，影响美观，可通过以下方法调整：
- 1.给定初始化信息（ng-init）
- 2.隐藏空白选项（ng-show="false"）
<form>
选择一个选项:
<select ng-model="myVar" ng-init="myVar='tuts'">
<option ng-show="false" value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option value="cars">Cars
select>
form>
复制代码一些常用的 $ 指令
odd
even 偶数奇数
- $idnex 序号 从 0 开始
一些 ng 指令
- ng-hide
- ng-show
- ng-disabled
- 顾名思义
<div ng-app="myApp" ng-controller="personCtrl">
<button ng-click="toggle()">隐藏/显示button>
<p ng-hide="myVar">
名: <input type="text" ng-model="firstName"><br>
姓名: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
p>
div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe"
$scope.myVar = false;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
});
script>
复制代码事件
- ng-click
<div ng-app="" ng-controller="myCtrl">
<button ng-click="count = count + 1">点我！button>
<p>{{ count }}p>
div>
复制代码模块
创建模块
你可以通过 AngularJS 的 angular.module 函数来创建模块：
<div ng-app="myApp">...div>
<script>
var app = angular.module("myApp", []);
script>
复制代码"myApp" 参数对应执行应用的 HTML 元素。
现在你可以在 AngularJS 应用中添加控制器，指令，过滤器等。
添加控制器
你可以使用 ng-controller 指令来添加应用的控制器:
- AngularJS 实例
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
script>
复制代码添加指令
- AngularJS
提供了很多内置的指令，你可以使用它们来为你的应用添加功能。
完整的指令内容可以参阅 AngularJS 参考手册。
此外，你可以使用模块来为你应用添加自己的指令：
- AngularJS 实例
<div ng-app="myApp" runoob-directive>div>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "我在指令构造器中创建!"
};
});
script>
复制代码模块和控制器包含在 JS 文件中
通常 AngularJS 应用程序将模块和控制器包含在 JavaScript 文件中。
在以下实例中， "myApp.js" 包含了应用模块的定义程序， "myCtrl.js" 文件包含了控制器：
- AngularJS 实例
<html>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
div>
<script src="myApp.js">script>
<script src="myCtrl.js">script>
body>
html>
复制代码总结一下
form 对象的属性有：
- $pristine 表单是否未被动过
- $dirty 表单是否被动过
- $valid 表单是否验证通过
- $invalid 表单是否验证失败
- $error 表单的验证错误
- 控制器的意义：控制器是分发者，处理临时数据、对域（$scope）进行划分
- 指令的意义：可以重复使用，可自定义创建，如代码中compare
- 表单验证的意义：数据真实性、可靠性的保证
问题
- 验证表单的使用数据的使用?
- 使用对象和注意 form 表单的 name 属性
- 注意 required 的使用
- $scope 是一个作用域，注意使用范围
- 完善的 MVC 模型我们要把几个曾侧分开
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
