7-进军 angular1.x 表单和事件、模块

2021-02-02 09:49:19 浏览数 (1)

表单和事件，模块

表单

单选框/select/form/下拉框

  • 使用 ng-option
  • 和 ng-reapeat
代码语言：javascript复制
<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"）
代码语言：javascript复制
<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>
复制代码

一些常用的 $ 指令

even 偶数奇数

  • $idnex 序号 从 0 开始

一些 ng 指令

  • ng-hide
  • ng-show
  • ng-disabled
  • 顾名思义
代码语言：javascript复制
<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
代码语言：javascript复制
<div ng-app="" ng-controller="myCtrl">

<button ng-click="count = count   1">点我！button>

<p>{{ count }}p>

div>
复制代码

模块

创建模块

你可以通过 AngularJS 的 angular.module 函数来创建模块：

代码语言：javascript复制
<div ng-app="myApp">...div>

<script>

var app = angular.module("myApp", []); 

script>
复制代码

"myApp" 参数对应执行应用的 HTML 元素。

现在你可以在 AngularJS 应用中添加控制器，指令，过滤器等。

添加控制器

你可以使用 ng-controller 指令来添加应用的控制器:

  • AngularJS 实例
代码语言：javascript复制
<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 实例
代码语言：javascript复制
<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 实例
代码语言：javascript复制
<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 模型我们要把几个曾侧分开
angularjs javascript

0 人点赞